<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Code Analytics - Terminal</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    
    <!-- Service Scripts (loaded first as dependencies) -->
    <script src="services/WebSocketService.js"></script>
    <script src="services/DataService.js"></script>
    <script src="services/StateService.js"></script>
    
    <!-- Component Scripts -->
    <script src="components/HeaderComponent.js"></script>
    <script src="components/Charts.js"></script>
    <!-- Dashboard.js removed - deprecated architecture -->
    <script src="components/ActivityHeatmap.js"></script>
    <script src="components/SessionTimer.js"></script>
    <script src="components/ConversationTable.js"></script>
    <script src="components/ToolDisplay.js"></script>
    <script src="components/Sidebar.js"></script>
    <script src="components/DashboardPage.js"></script>
    <script src="components/App.js"></script>
    
    <!-- main.js removed - deprecated architecture -->
    <style>
        :root {
            /* Dark theme colors (default) */
            --bg-primary: #0d1117;
            --bg-secondary: #161b22;
            --bg-tertiary: #21262d;
            --border-primary: #30363d;
            --border-secondary: #21262d;
            --text-primary: #c9d1d9;
            --text-secondary: #7d8590;
            --text-accent: #d57455;
            --text-success: #3fb950;
            --text-warning: #f97316;
            --text-error: #f85149;
            --text-info: #a5d6ff;
            --shadow-primary: rgba(0, 0, 0, 0.4);
            --shadow-secondary: rgba(1, 4, 9, 0.85);
        }
        
        [data-theme="light"] {
            /* Light theme colors */
            --bg-primary: #ffffff;
            --bg-secondary: #f6f8fa;
            --bg-tertiary: #f1f3f4;
            --border-primary: #d0d7de;
            --border-secondary: #e5e5e5;
            --text-primary: #24292f;
            --text-secondary: #656d76;
            --text-accent: #d73a49;
            --text-success: #28a745;
            --text-warning: #f97316;
            --text-error: #d73a49;
            --text-info: #0366d6;
            --shadow-primary: rgba(0, 0, 0, 0.1);
            --shadow-secondary: rgba(0, 0, 0, 0.2);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            line-height: 1.4;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        
        .terminal {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .terminal-header {
            border-bottom: 1px solid var(--border-primary);
            padding-bottom: 20px;
            margin-bottom: 20px;
            position: relative;
        }
        
        .terminal-title {
            color: var(--text-accent);
            font-size: 1.25rem;
            font-weight: normal;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--text-success);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        
        .terminal-subtitle {
            color: var(--text-secondary);
            font-size: 0.875rem;
            margin-top: 4px;
        }
        
        .header-actions {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .theme-switch-container {
            display: flex;
            align-items: center;
            font-family: inherit;
        }
        
        .theme-switch {
            position: relative;
            cursor: pointer;
        }
        
        .theme-switch-track {
            position: relative;
            width: 48px;
            height: 24px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 3px;
            transition: all 0.3s ease;
        }
        
        .theme-switch-track:hover {
            border-color: var(--text-accent);
            background: var(--border-primary);
        }
        
        .theme-switch-thumb {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 18px;
            height: 18px;
            background: var(--text-accent);
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateX(0);
        }
        
        .theme-switch-thumb.light {
            transform: translateX(22px);
        }
        
        .theme-switch-icon {
            font-size: 0.7rem;
            color: var(--bg-primary);
            transition: all 0.3s ease;
        }
        
        
        .theme-switch-track::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            background: linear-gradient(45deg, transparent, var(--text-accent));
            border-radius: 3px;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }
        
        .theme-switch-track:hover::before {
            opacity: 0.1;
        }
        
        .github-star-btn {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            color: var(--text-primary);
            padding: 8px 12px;
            border-radius: 6px;
            text-decoration: none;
            font-family: inherit;
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
            cursor: pointer;
        }
        
        .github-star-btn:hover {
            border-color: var(--text-accent);
            background: var(--border-primary);
            color: var(--text-accent);
            text-decoration: none;
        }
        
        .github-star-btn .star-icon {
            font-size: 0.75rem;
        }
        
        .stats-bar {
            display: flex;
            gap: 40px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        
        .stat {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .stat-label {
            color: #7d8590;
            font-size: 0.875rem;
        }
        
        .stat-value {
            color: #d57455;
            font-weight: bold;
        }
        
        .stat-sublabel {
            color: #7d8590;
            font-size: 0.75rem;
            display: block;
            margin-top: 2px;
        }
        
        .token-popover, .claude-sessions-popover {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 8px;
            padding: 12px;
            background: #21262d;
            border: 1px solid #30363d;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            display: none;
            z-index: 1000;
            min-width: 200px;
            white-space: nowrap;
            pointer-events: auto;
        }
        
        .token-popover::before, .claude-sessions-popover::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-bottom-color: #30363d;
        }
        
        .token-popover::after, .claude-sessions-popover::after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-bottom-color: #21262d;
            margin-top: 1px;
        }
        
        .token-breakdown-item, .session-breakdown-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            font-size: 0.85rem;
        }
        
        .token-breakdown-item:last-child, .session-breakdown-item:last-child {
            margin-bottom: 0;
        }
        
        .token-type, .session-type {
            color: #7d8590;
        }
        
        .token-value, .session-value {
            color: #c9d1d9;
            font-weight: 500;
        }
        
        .chart-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin: 20px 0;
            padding: 12px 0;
            border-top: 1px solid #21262d;
            border-bottom: 1px solid #21262d;
        }
        
        .chart-controls-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .chart-controls-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .date-control {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .date-label {
            color: #7d8590;
            font-size: 0.875rem;
        }
        
        .date-input {
            background: #21262d;
            border: 1px solid #30363d;
            color: #c9d1d9;
            padding: 6px 12px;
            border-radius: 4px;
            font-family: inherit;
            font-size: 0.875rem;
            cursor: pointer;
        }
        
        .date-input:focus {
            outline: none;
            border-color: #d57455;
        }
        
        .refresh-btn {
            background: none;
            border: 1px solid #30363d;
            color: #7d8590;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.875rem;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .refresh-btn:hover {
            border-color: #d57455;
            color: #d57455;
        }
        
        .refresh-btn.loading {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* Action Buttons Container */
        .action-buttons-container {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin: 8px 0 16px 0;
            padding: 0;
        }

        /* Small Action Buttons */
        .action-btn-small {
            /* Reset browser defaults */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: 1px solid var(--border-primary);
            outline: none;
            
            /* Custom styles */
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.75rem;
            transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
            display: flex;
            align-items: center;
            gap: 4px;
            min-width: 80px;
            width: auto;
            height: 24px;
            white-space: nowrap;
            box-sizing: border-box;
            
            /* Force fixed dimensions */
            max-width: 80px;
            overflow: hidden;
        }

        .action-btn-small:hover {
            border-color: var(--text-accent);
            color: var(--text-accent);
            background: var(--bg-secondary);
        }

        .action-btn-small:active {
            opacity: 0.8;
            transform: none !important;
            scale: none !important;
        }

        .action-btn-small:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }

        /* Prevent any size changes on action buttons */
        .action-btn-small,
        .action-btn-small:hover,
        .action-btn-small:active,
        .action-btn-small:focus,
        .action-btn-small.loading {
            transform: none !important;
            scale: none !important;
            height: 24px !important;
            min-width: 80px !important;
            max-width: 80px !important;
            padding: 4px 8px !important;
            border-width: 1px !important;
            box-sizing: border-box !important;
            white-space: nowrap !important;
            overflow: hidden !important;
        }

        .action-btn-small.loading {
            opacity: 0.7;
            pointer-events: none;
        }

        .btn-icon-small {
            font-size: 0.7rem;
            line-height: 1;
            display: inline-block;
            width: 10px;
            text-align: center;
        }

        /* Animation for refresh button */
        .btn-icon-small.spin {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .last-update-info {
            color: #7d8590;
            font-size: 0.875rem;
            margin: 8px 0 16px 0;
            padding: 8px 0;
            border-bottom: 1px solid #21262d;
        }

        .last-update-label {
            color: #7d8590;
        }

        .date-separator {
            color: #7d8590;
            font-size: 0.875rem;
        }

        .filter-label {
            color: #7d8590;
            font-size: 0.875rem;
        }

        .filter-btn {
            background: none;
            border: 1px solid #30363d;
            color: #7d8590;
            padding: 4px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }

        .filter-btn:hover {
            border-color: #d57455;
            color: #d57455;
        }

        .filter-btn.active {
            background: #d57455;
            border-color: #d57455;
            color: #0d1117;
        }

        .charts-container {
            display: grid;
            grid-template-columns: 2fr 1fr 2fr 1fr;
            gap: 30px;
            margin: 20px 0 30px 0;
        }

        .chart-card {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 20px;
            position: relative;
        }

        .chart-title {
            color: #d57455;
            font-size: 0.875rem;
            text-transform: uppercase;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .chart-canvas {
            width: 100% !important;
            height: 200px !important;
        }

        .tool-summary {
            padding: 20px;
            height: 200px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            overflow-y: auto;
        }

        .tool-stat {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-secondary);
            border-radius: 4px;
            transition: all 0.2s ease;
            font-size: 0.8rem;
        }

        .tool-stat:hover {
            background: var(--bg-secondary);
            border-color: var(--border-primary);
        }

        .tool-stat-label {
            color: var(--text-secondary);
            font-weight: 500;
        }

        .tool-stat-value {
            color: var(--text-primary);
            font-weight: 600;
        }

        .tool-stat-accent {
            color: var(--text-accent);
        }

        .tool-top-tool {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-secondary);
            border-radius: 4px;
            margin-top: auto;
        }

        .tool-icon {
            width: 24px;
            height: 24px;
            background: var(--text-accent);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: white;
        }

        .tool-info {
            flex: 1;
        }

        .tool-name {
            color: var(--text-primary);
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .tool-usage {
            color: var(--text-secondary);
            font-size: 0.7rem;
        }
        
        /* Session Timer Accordion Styles */
        .session-timer-section {
            margin: 15px 0;
        }
        
        .session-timer-accordion {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            margin-bottom: 15px;
            position: relative;
        }
        
        .session-timer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-primary);
            transition: background-color 0.2s ease;
        }
        
        .session-timer-header:hover {
            background: var(--bg-tertiary);
        }
        
        .session-timer-title-section {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .session-timer-chevron {
            font-size: 0.75rem;
            color: var(--text-secondary);
            transition: transform 0.2s ease;
        }
        
        .session-timer-title {
            color: var(--text-accent);
            font-size: 0.9rem;
            font-weight: 500;
            margin: 0;
        }
        
        .session-timer-status-inline {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.75rem;
        }
        
        .session-timer-status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        
        .session-timer-status-dot.active {
            background: #3fb950;
        }
        
        .session-timer-status-dot.warning {
            background: #f97316;
        }
        
        .session-timer-status-dot.inactive {
            background: #7d8590;
        }
        
        .session-timer-status-text {
            color: var(--text-primary);
        }
        
        .session-timer-content {
            padding: 12px 16px;
            border-top: none;
        }
        
        .session-loading-state {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 20px 0;
            color: #7d8590;
        }
        
        .session-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid #30363d;
            border-top: 2px solid #d57455;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .session-timer-empty {
            text-align: center;
            padding: 20px;
        }
        
        .session-timer-empty-text {
            color: var(--text-primary);
            font-size: 0.9rem;
            margin-bottom: 4px;
        }
        
        .session-timer-empty-subtext {
            color: var(--text-secondary);
            font-size: 0.8rem;
        }
        
        .session-timer-compact {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .session-timer-row {
            display: flex;
            gap: 20px;
            align-items: center;
        }
        
        .session-timer-time-compact {
            flex: 0 0 auto;
            text-align: center;
        }
        
        .session-timer-time-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-accent);
            line-height: 1;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        }
        
        .session-timer-time-label {
            color: var(--text-secondary);
            font-size: 0.75rem;
            margin-top: 2px;
        }
        
        .session-timer-progress-compact {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .session-timer-progress-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .session-timer-progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .session-timer-progress-label {
            color: var(--text-primary);
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .session-timer-progress-value {
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            display: inline-flex;
            align-items: center;
        }
        
        .session-timer-progress-bar {
            width: 100%;
            height: 4px;
            background: var(--border-primary);
            border-radius: 2px;
            overflow: hidden;
            position: relative;
        }
        
        .session-timer-progress-fill {
            height: 100%;
            background: var(--text-success);
            transition: width 0.3s ease, background-color 0.3s ease;
            border-radius: 2px;
        }
        
        .session-timer-stats-row {
            display: flex;
            gap: 12px;
            padding-top: 8px;
            border-top: 1px solid var(--border-primary);
            flex-wrap: wrap;
        }
        
        .session-timer-stat-compact {
            display: flex;
            align-items: center;
            gap: 4px;
            flex: 1;
            min-width: 0;
        }
        
        .session-timer-stat-label {
            color: var(--text-secondary);
            font-size: 0.75rem;
            white-space: nowrap;
        }
        
        .session-timer-stat-value {
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.75rem;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .session-timer-error {
            text-align: center;
            padding: 20px;
            color: var(--text-error);
        }
        
        .session-timer-error-text {
            margin-bottom: 12px;
            font-size: 0.85rem;
        }
        
        .session-timer-retry-btn {
            background: var(--text-error);
            border: 1px solid var(--text-error);
            color: var(--bg-primary);
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.2s ease;
        }
        
        .session-timer-retry-btn:hover {
            opacity: 0.8;
        }
        
        .session-warnings {
            margin-top: 8px;
        }
        
        .warnings-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .session-warning {
            background: rgba(248, 81, 73, 0.1);
            border: 1px solid rgba(248, 81, 73, 0.3);
            border-radius: 4px;
            padding: 8px;
            color: #ffa198;
            font-size: 0.75rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .session-warning.error {
            background: rgba(248, 81, 73, 0.15);
            border-color: rgba(248, 81, 73, 0.5);
        }
        
        .session-warning.warning {
            background: rgba(249, 115, 22, 0.1);
            border-color: rgba(249, 115, 22, 0.3);
            color: #fbbf24;
        }
        
        .session-warning.info {
            background: rgba(59, 130, 246, 0.1);
            border-color: rgba(59, 130, 246, 0.3);
            color: #93c5fd;
        }
        
        /* Session Timer Info Icon and Popover */
        .session-timer-label-with-info {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .session-timer-info-icon {
            color: var(--text-secondary);
            font-size: 0.7rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            margin-left: 4px;
            opacity: 0.6;
            line-height: 1;
            vertical-align: middle;
            padding: 2px;
            border-radius: 2px;
        }
        
        .session-timer-info-icon:hover {
            color: var(--text-info);
            opacity: 1;
            background-color: rgba(88, 166, 255, 0.1);
        }
        
        .session-timer-info-icon:active {
            background-color: rgba(88, 166, 255, 0.2);
        }
        
        .session-timer-tooltip {
            position: absolute;
            z-index: 1000;
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            padding: 0;
            box-shadow: 0 16px 32px rgba(1, 4, 9, 0.85);
            max-width: 300px;
            font-size: 0.75rem;
            line-height: 1.4;
        }
        
        .session-timer-tooltip-content {
            padding: 12px;
        }
        
        .session-timer-tooltip-content h4 {
            margin: 0 0 8px 0;
            color: var(--text-primary);
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .session-timer-tooltip-content p {
            margin: 0 0 8px 0;
            color: var(--text-primary);
            line-height: 1.5;
        }
        
        .session-timer-tooltip-content p:last-of-type {
            margin-bottom: 12px;
        }
        
        .session-timer-tooltip-link {
            border-top: 1px solid var(--border-primary);
            padding-top: 8px;
        }
        
        .session-timer-tooltip-link a {
            color: var(--text-info);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: color 0.2s ease;
        }
        
        .session-timer-tooltip-link a:hover {
            opacity: 0.8;
        }
        
        .session-timer-tooltip-link i {
            font-size: 0.65rem;
        }
        
        /* Claude Session Info Styles */
        .claude-session-info {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 12px;
            margin: 12px 0;
        }
        
        .claude-session-info-row {
            margin-bottom: 12px;
        }
        
        .claude-session-info-compact {
            padding: 8px 12px;
            background: #0d1117;
            border: 1px solid #21262d;
            border-radius: 4px;
        }
        
        .claude-session-header {
            color: #d57455;
            font-size: 0.8rem;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .claude-session-details {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .claude-session-stats {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        
        .claude-session-stat {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .claude-session-label {
            color: #7d8590;
            font-size: 0.75rem;
        }
        
        .claude-session-value {
            color: #c9d1d9;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .claude-session-value.expired {
            color: #f85149;
        }
        
        .session-timer-status-dot.expired {
            background: #f85149;
            animation: pulse 2s infinite;
        }
        
        .charts-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 20px 0 30px 0;
        }
        
        .chart-card {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 20px;
            position: relative;
        }
        
        .chart-title {
            color: #d57455;
            font-size: 0.875rem;
            text-transform: uppercase;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .chart-canvas {
            width: 100% !important;
            height: 200px !important;
        }
        
        .tool-summary {
            padding: 20px;
            height: 200px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            overflow-y: auto;
        }
        
        .tool-stat {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-secondary);
            border-radius: 4px;
            transition: all 0.2s ease;
            font-size: 0.8rem;
        }
        
        .tool-stat:hover {
            background: var(--bg-secondary);
            border-color: var(--border-primary);
        }
        
        .tool-stat-label {
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .tool-stat-value {
            color: var(--text-primary);
            font-weight: 600;
        }
        
        .tool-stat-accent {
            color: var(--text-accent);
        }
        
        .tool-top-tool {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-secondary);
            border-radius: 4px;
            margin-top: auto;
        }
        
        .tool-icon {
            width: 24px;
            height: 24px;
            background: var(--text-accent);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: white;
        }
        
        .tool-info {
            flex: 1;
        }
        
        .tool-name {
            color: var(--text-primary);
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .tool-usage {
            color: var(--text-secondary);
            font-size: 0.7rem;
        }
        
        .filter-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin: 20px 0;
            padding: 12px 0;
            border-top: 1px solid #21262d;
            border-bottom: 1px solid #21262d;
        }
        
        .filter-section {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .filter-label {
            color: #7d8590;
            font-size: 0.875rem;
        }
        
        .filter-buttons {
            display: flex;
            gap: 8px;
        }
        
        .filter-actions {
            display: flex;
            align-items: center;
        }
        
        .filter-btn {
            background: none;
            border: 1px solid #30363d;
            color: #7d8590;
            padding: 4px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }
        
        .filter-btn:hover {
            border-color: #d57455;
            color: #d57455;
        }
        
        .filter-btn.active {
            background: #d57455;
            border-color: #d57455;
            color: #0d1117;
        }
        
        .sessions-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
        
        .sessions-table th {
            text-align: left;
            padding: 8px 12px;
            color: #7d8590;
            font-size: 0.875rem;
            font-weight: normal;
            border-bottom: 1px solid #30363d;
        }
        
        .sessions-table th:nth-child(1) { width: 20%; } /* conversation id */
        .sessions-table th:nth-child(2) { width: 15%; } /* project */
        .sessions-table th:nth-child(3) { width: 10%; } /* model */
        .sessions-table th:nth-child(4) { width: 8%; }  /* messages */
        .sessions-table th:nth-child(5) { width: 10%; } /* tokens */
        .sessions-table th:nth-child(6) { width: 12%; } /* last activity */
        .sessions-table th:nth-child(7) { width: 15%; } /* conversation state - FIXED WIDTH */
        .sessions-table th:nth-child(8) { width: 10%; } /* status */
        
        .sessions-table td {
            padding: 8px 12px;
            font-size: 0.875rem;
            border-bottom: 1px solid #21262d;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* Allow status squares to wrap and flex */
        .sessions-table td:nth-child(8) {
            white-space: normal;
            overflow: visible;
        }
        
        /* Allow conversation id to wrap for long IDs */
        .sessions-table td:nth-child(1) {
            white-space: normal;
            overflow: visible;
        }
        
        .sessions-table tr:hover {
            background: #161b22;
        }
        
        .session-id {
            color: #d57455;
            font-family: monospace;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .process-indicator {
            display: inline-block;
            width: 6px;
            height: 6px;
            background: #3fb950;
            border-radius: 50%;
            animation: pulse 2s infinite;
            cursor: help;
        }
        
        .process-indicator.orphan {
            background: #f85149;
        }
        
        .session-id-container {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .session-project {
            color: #c9d1d9;
        }
        
        .session-model {
            color: #a5d6ff;
            font-size: 0.8rem;
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .session-messages {
            color: #7d8590;
        }
        
        .session-tokens {
            color: #f85149;
        }
        
        .session-time {
            color: #7d8590;
            font-size: 0.8rem;
        }
        
        .status-active {
            color: #3fb950;
            font-weight: bold;
        }
        
        .status-recent {
            color: #d29922;
        }
        
        .status-inactive {
            color: #7d8590;
        }
        
        .conversation-state {
            color: #d57455;
            font-style: italic;
            font-size: 0.8rem;
        }
        
        .conversation-state.working {
            animation: working-pulse 1.5s infinite;
        }
        
        .conversation-state.typing {
            animation: typing-pulse 1.5s infinite;
        }
        
        @keyframes working-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        @keyframes typing-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        
        .status-squares {
            display: flex;
            gap: 2px;
            align-items: center;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
        }
        
        .status-square {
            width: 10px !important;
            height: 10px !important;
            min-width: 10px !important;
            min-height: 10px !important;
            max-width: 10px !important;
            max-height: 10px !important;
            border-radius: 2px;
            cursor: help;
            position: relative;
            flex-shrink: 0;
            box-sizing: border-box;
        }
        
        .status-square.success {
            background: #d57455;
        }
        
        .status-square.tool {
            background: #f97316;
        }
        
        .status-square.error {
            background: #dc2626;
        }
        
        .status-square.pending {
            background: #6b7280;
        }
        
        /* Additional specificity to override any table styling */
        .sessions-table .status-squares .status-square {
            width: 10px !important;
            height: 10px !important;
            min-width: 10px !important;
            min-height: 10px !important;
            max-width: 10px !important;
            max-height: 10px !important;
            display: inline-block !important;
            font-size: 0 !important;
            line-height: 0 !important;
            border: none !important;
            outline: none !important;
            vertical-align: top !important;
        }
        
        .status-square:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #1c1c1c;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            white-space: nowrap;
            z-index: 1000;
            margin-bottom: 4px;
            border: 1px solid #30363d;
        }
        
        .status-square:hover::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: #30363d;
            z-index: 1000;
        }
        
        .loading, #error {
            text-align: center;
            padding: 40px;
            color: #7d8590;
        }
        
        #error {
            color: #f85149;
        }
        
        .no-sessions {
            text-align: center;
            padding: 40px;
            color: #7d8590;
            font-style: italic;
        }
        
        .session-detail {
            display: none;
            margin-top: 20px;
        }
        
        .session-detail.active {
            display: block;
        }
        
        .detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid #30363d;
            margin-bottom: 20px;
        }
        
        .detail-title {
            color: #d57455;
            font-size: 1.1rem;
        }
        
        .detail-actions {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        
        .export-format-select {
            background: #21262d;
            border: 1px solid #30363d;
            color: #c9d1d9;
            padding: 6px 12px;
            border-radius: 4px;
            font-family: inherit;
            font-size: 0.875rem;
            cursor: pointer;
        }
        
        .export-format-select:focus {
            outline: none;
            border-color: #d57455;
        }
        
        .export-format-select option {
            background: #21262d;
            color: #c9d1d9;
        }
        
        .btn {
            background: none;
            border: 1px solid #30363d;
            color: #7d8590;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }
        
        .btn:hover {
            border-color: #d57455;
            color: #d57455;
        }
        
        .btn-primary {
            background: #d57455;
            border-color: #d57455;
            color: #0d1117;
        }
        
        .btn-primary:hover {
            background: #e8956f;
            border-color: #e8956f;
        }
        
        .session-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .info-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .info-label {
            color: #7d8590;
            font-size: 0.75rem;
            text-transform: uppercase;
        }
        
        .info-value {
            color: #c9d1d9;
            font-size: 0.875rem;
        }

        .info-value.model {
            color: #a5d6ff;
            font-weight: bold;
        }
        
        .search-input {
            width: 100%;
            background: #21262d;
            border: 1px solid #30363d;
            color: #c9d1d9;
            padding: 8px 12px;
            border-radius: 4px;
            font-family: inherit;
            font-size: 0.875rem;
            margin-bottom: 16px;
        }
        
        .search-input:focus {
            outline: none;
            border-color: #d57455;
        }
        
        .conversation-history {
            border: 1px solid #30363d;
            border-radius: 6px;
            max-height: 600px;
            overflow-y: auto;
        }
        
        .message {
            padding: 16px;
            border-bottom: 1px solid #21262d;
            position: relative;
        }
        
        .message-metadata {
            margin: 8px 0;
            padding: 4px 8px;
            background: #161b22;
            border-radius: 4px;
            border-left: 2px solid #30363d;
        }
        
        .message-id {
            margin-top: 8px;
            text-align: right;
            opacity: 0.7;
        }
        
        .message:last-child {
            border-bottom: none;
        }
        
        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .message-role {
            color: #58a6ff;
            font-size: 0.875rem;
            font-weight: bold;
        }
        
        .message-role.user {
            color: #3fb950;
        }
        
        .message-role.assistant {
            color: #d57455;
        }
        
        .message-time {
            color: white;
            font-size: 0.75rem;
        }
        
        .message-content {
            color: #c9d1d9;
            font-size: 0.875rem;
            line-height: 1.5;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        
        .message-type-indicator {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 8px;
            height: 8px;
            border-radius: 2px;
            cursor: help;
        }
        
        .message-type-indicator.success {
            background: #d57455;
        }
        
        .message-type-indicator.tool {
            background: #f97316;
        }
        
        .message-type-indicator.error {
            background: #dc2626;
        }
        
        .message-type-indicator.pending {
            background: #6b7280;
        }
        
        .message-type-indicator:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            top: 100%;
            right: 0;
            background: #1c1c1c;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            white-space: nowrap;
            z-index: 1000;
            margin-top: 4px;
            border: 1px solid #30363d;
        }

        /* Terminal Chat Styles */
        .messages-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 8px;
        }

        .terminal-message {
            display: flex;
            width: 100%;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.85rem;
            line-height: 1.3;
            min-width: 0;
        }

        .terminal-message.user {
            justify-content: flex-end;
        }

        .terminal-message.assistant {
            justify-content: flex-start;
        }

        .message-container {
            max-width: 75%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            padding: 10px 12px;
            position: relative;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            word-wrap: break-word;
            overflow-wrap: break-word;
            min-width: 0;
        }

        .terminal-message.user .message-container {
            background: var(--bg-secondary);
            border: 1px solid rgba(63, 185, 80, 0.3);
            border-left: 4px solid var(--text-success);
        }

        .terminal-message.assistant .message-container {
            background: var(--bg-tertiary);
            border: 1px solid rgba(213, 116, 85, 0.3);
            border-left: 4px solid var(--text-accent);
        }

        /* Terminal window effect */
        .message-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--border-secondary);
            border-radius: 6px 6px 0 0;
        }

        .terminal-message.user .message-container::before {
            background: rgba(63, 185, 80, 0.2);
        }

        .terminal-message.assistant .message-container::before {
            background: rgba(213, 116, 85, 0.2);
        }

        .message-prompt {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            font-size: 0.8rem;
            margin-bottom: 6px;
        }

        .message-type-indicator {
            display: inline-block;
            border-radius: 2px;
            width: 12px;
            height: 12px;
            vertical-align: baseline;
            margin-top: 2px;
        }

        .type-icon {
            display: none;
        }

        .type-label {
            display: none;
        }

        /* Message Type Colors */
        .type-user-input {
            background: rgba(63, 185, 80, 0.2);
            color: var(--text-success);
            border: 1px solid rgba(63, 185, 80, 0.4);
        }

        .type-tool-result {
            background: rgba(168, 85, 247, 0.2);
            color: #a855f7;
            border: 1px solid rgba(168, 85, 247, 0.4);
        }

        .type-response {
            background: rgba(59, 130, 246, 0.2);
            color: #3b82f6;
            border: 1px solid rgba(59, 130, 246, 0.4);
        }

        .type-tools-only {
            background: rgba(249, 115, 22, 0.2);
            color: #f97316;
            border: 1px solid rgba(249, 115, 22, 0.4);
        }

        .type-response-tools {
            background: rgba(213, 116, 85, 0.2);
            color: var(--text-accent);
            border: 1px solid rgba(213, 116, 85, 0.4);
        }

        .type-compact-summary {
            background: rgba(165, 214, 255, 0.2);
            color: var(--text-info);
            border: 1px solid rgba(165, 214, 255, 0.4);
        }

        /* Show Results Button */
        .show-results-btn {
            background: var(--text-accent);
            color: white;
            border: none;
            padding: 2px 6px;
            margin-left: 8px;
            border-radius: 3px;
            font-size: 0.7rem;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .show-results-btn:hover {
            background: #c65d47;
        }

        .bash-cmd-btn {
            background: #0ea5e9;
            font-size: 0.65rem;
            padding: 1px 4px;
        }

        .bash-cmd-btn:hover {
            background: #0284c7;
        }

        .tool-detail-btn {
            background: #059669;
            font-size: 0.65rem;
            padding: 1px 4px;
        }

        .tool-detail-btn:hover {
            background: #047857;
        }

        /* Text expansion styling */
        .text-content-preview {
            display: block;
        }

        .text-expand-section {
            margin-top: 8px;
            padding-top: 4px;
            border-top: 1px solid var(--border-secondary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .text-expand-btn {
            background: linear-gradient(135deg, #374151, #4b5563);
            color: white;
            font-size: 0.65rem;
            padding: 3px 8px;
            border: none;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease;
            font-weight: 500;
        }

        .text-expand-btn:hover {
            background: linear-gradient(135deg, #4b5563, #6b7280);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            transform: translateY(-1px);
        }

        .text-expand-btn:active {
            transform: translateY(0);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .continuation {
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-style: italic;
        }

        /* Results Modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            width: 90%;
            max-width: 1200px;
            max-height: 90%;
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-primary);
            background: var(--bg-tertiary);
            border-radius: 8px 8px 0 0;
        }

        .modal-header h3 {
            color: var(--text-primary);
            margin: 0;
            font-size: 1.1rem;
        }

        .modal-actions {
            display: flex;
            gap: 8px;
        }

        .copy-btn, .close-btn {
            background: var(--text-accent);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background-color 0.2s ease;
        }

        .copy-btn:hover, .close-btn:hover {
            background: #c65d47;
        }

        .close-btn {
            background: var(--text-secondary);
            font-size: 1.2rem;
            padding: 4px 8px;
        }

        .close-btn:hover {
            background: #9ca3af;
        }

        .modal-body {
            flex: 1;
            overflow: hidden;
            padding: 0;
        }

        .modal-results-content {
            width: 100%;
            height: 100%;
            min-height: 400px;
            max-height: 70vh;
            overflow: auto;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.8rem;
            line-height: 1.4;
            padding: 16px;
            margin: 0;
            border: none;
            resize: none;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        /* Scrollbar styling for modal content */
        .modal-results-content::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .modal-results-content::-webkit-scrollbar-track {
            background: var(--bg-secondary);
        }

        .modal-results-content::-webkit-scrollbar-thumb {
            background: var(--border-primary);
            border-radius: 4px;
        }

        .modal-results-content::-webkit-scrollbar-thumb:hover {
            background: var(--text-secondary);
        }

        .prompt-char {
            color: var(--text-accent);
            font-weight: bold;
            width: 12px;
        }

        .terminal-message.user .prompt-char {
            color: var(--text-success);
        }

        .message-metadata {
            display: flex;
            align-items: baseline;
            gap: 6px;
            margin-left: auto;
            flex-wrap: wrap;
            line-height: 1;
        }

        .role-label {
            color: var(--text-primary);
            font-weight: 600;
            min-width: 50px;
        }

        .timestamp {
            color: var(--text-secondary);
            font-size: 0.7rem;
        }

        .tokens {
            color: var(--text-secondary);
            font-size: 0.7rem;
            font-family: monospace;
        }

        .tool-count {
            color: #f97316;
            font-size: 0.7rem;
            font-family: monospace;
        }

        .model {
            color: var(--text-secondary);
            font-size: 0.7rem;
            font-family: monospace;
        }

        .message-id {
            color: var(--text-secondary);
            font-size: 0.7rem;
            font-family: monospace;
            opacity: 0.8;
        }

        .confirmation-context {
            color: var(--text-info);
            font-size: 0.75rem;
            font-style: italic;
            margin-left: 8px;
        }

        .message-body {
            color: var(--text-primary);
            padding: 4px 0 0 0;
            font-size: 0.85rem;
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            line-height: 1.4;
            max-width: 100%;
        }

        .terminal-message.user .message-body {
            text-align: left;
        }

        .terminal-message.assistant .message-body {
            text-align: left;
        }

        /* Terminal Tool Styles */
        .terminal-tool {
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.8rem;
            margin: 4px 0;
            padding: 4px 8px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            border-left: 2px solid transparent;
        }

        .terminal-tool .tool-prompt {
            color: #f97316;
            font-weight: bold;
            width: 12px;
        }

        .terminal-tool.tool-use {
            border-left-color: #f97316;
        }

        .terminal-tool.tool-result {
            border-left-color: var(--text-success);
        }

        .terminal-tool.tool-result .tool-prompt {
            color: var(--text-success);
        }

        .terminal-tool.tool-result.error {
            border-left-color: var(--text-error);
        }

        .terminal-tool.tool-result.error .tool-prompt {
            color: var(--text-error);
        }

        .terminal-tool.large {
            border-left-color: #a855f7;
        }

        .terminal-tool.large .tool-prompt {
            color: #a855f7;
        }

        .terminal-tool .tool-name {
            color: var(--text-primary);
            font-weight: 600;
            min-width: 80px;
        }

        .terminal-tool .tool-status {
            color: var(--text-secondary);
            font-family: monospace;
            font-size: 0.75rem;
        }

        .terminal-tool .tool-id {
            color: var(--text-secondary);
            font-family: monospace;
            font-size: 0.75rem;
        }

        .terminal-tool .tool-summary {
            color: var(--text-secondary);
            flex: 1;
        }

        .terminal-tool .tool-output {
            color: var(--text-secondary);
            flex: 1;
            word-break: break-all;
        }

        /* Enhanced Bash Tool Styles */
        .terminal-tool.bash-output {
            flex-direction: column;
            align-items: flex-start;
            padding: 8px 12px;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid #30363d;
        }

        .terminal-tool.bash-output .tool-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            width: 100%;
        }

        .bash-console {
            width: 100%;
            background: #0d1117;
            border: 1px solid #21262d;
            border-radius: 4px;
            padding: 12px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.75rem;
            line-height: 1.4;
            overflow-x: auto;
            white-space: pre-wrap;
        }

        .bash-command {
            color: #58a6ff;
            font-weight: 600;
        }

        .console-error {
            color: #ff7b72;
        }

        .console-warning {
            color: #f0883e;
        }

        .console-success {
            color: #3fb950;
        }

        .console-info {
            color: #58a6ff;
        }

        .console-command {
            color: #d2a8ff;
        }

        .console-output {
            color: #c9d1d9;
        }

        /* Compact Tool Display - Terminal Console Style */
        .terminal-tool.compact {
            flex-direction: column;
            align-items: flex-start;
            gap: 0;
            padding: 8px 12px;
            margin: 4px 0;
            background: #0d1117;
            border: 1px solid #21262d;
            border-radius: 4px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            position: relative;
        }

        .terminal-tool.compact .tool-prompt {
            font-size: 0.8rem;
            margin-right: 6px;
            color: #7d8590;
        }

        .terminal-tool.compact .tool-command {
            color: #c9d1d9;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1.4;
        }

        .tool-name-bold {
            font-weight: 600;
            color: #58a6ff;
            font-size: 0.75rem;
        }

        .terminal-tool.compact .tool-output-compact {
            margin-left: 12px;
            margin-top: 4px;
            font-size: 0.7rem;
            line-height: 1.3;
            width: calc(100% - 12px);
            color: #8b949e;
        }

        .terminal-tool.compact.error {
            border-color: #f85149;
            background: rgba(248, 81, 73, 0.05);
        }

        .terminal-tool.compact.error .tool-prompt {
            color: #f85149;
        }


        .json-output, .text-output {
            margin: 0;
            padding: 6px 8px;
            background: #010409;
            border: none;
            border-radius: 2px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.7rem;
            line-height: 1.3;
            color: #c9d1d9;
            overflow-x: auto;
            white-space: pre-wrap;
        }

        .json-output {
            color: #79c0ff;
        }

        .continuation {
            color: #7d8590;
            font-style: italic;
        }

        .array-output, .object-output, .empty-output {
            color: #7d8590;
            font-style: italic;
            font-size: 0.75rem;
        }

        /* Code blocks in message content */
        .message-body .code-block {
            background: var(--bg-secondary);
            border: 1px solid var(--border-secondary);
            border-radius: 3px;
            padding: 8px;
            margin: 4px 0;
            font-size: 0.75rem;
            overflow-x: auto;
            word-wrap: break-word;
            white-space: pre-wrap;
            max-width: 100%;
        }

        .message-body .inline-code {
            background: var(--bg-secondary);
            border: 1px solid var(--border-secondary);
            border-radius: 2px;
            padding: 1px 4px;
            font-size: 0.8em;
            word-break: break-all;
            overflow-wrap: break-word;
        }

        .empty-content {
            color: var(--text-secondary);
            font-style: italic;
            font-size: 0.8rem;
        }

        /* Additional overflow handling for message content */
        .message-body * {
            max-width: 100%;
            box-sizing: border-box;
        }

        /* Handle long URLs and paths */
        .message-body {
            word-break: break-word;
        }

        /* Ensure no content can expand beyond container */
        .message-body pre,
        .message-body code,
        .message-body .code-block,
        .message-body .inline-code {
            max-width: 100%;
            box-sizing: border-box;
        }

        /* Handle very long single words or tokens */
        .message-body {
            overflow-wrap: anywhere;
        }

        /* Enhanced Markdown Styles */
        
        /* Headers */
        .message-body .markdown-h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 16px 0 12px 0;
            line-height: 1.3;
            border-bottom: 2px solid var(--border-primary);
            padding-bottom: 6px;
        }

        .message-body .markdown-h2 {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 14px 0 10px 0;
            line-height: 1.3;
            border-bottom: 1px solid var(--border-primary);
            padding-bottom: 4px;
        }

        .message-body .markdown-h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 12px 0 8px 0;
            line-height: 1.3;
        }

        .message-body .markdown-h4,
        .message-body .markdown-h5,
        .message-body .markdown-h6 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 10px 0 6px 0;
            line-height: 1.3;
        }

        /* Text formatting */
        .message-body .markdown-bold {
            font-weight: 600;
            color: var(--text-primary);
        }

        .message-body .markdown-italic {
            font-style: italic;
            color: var(--text-primary);
        }

        .message-body .markdown-bold-italic {
            font-weight: 600;
            font-style: italic;
            color: var(--text-primary);
        }

        .message-body .markdown-strikethrough {
            text-decoration: line-through;
            color: var(--text-secondary);
        }

        /* Links */
        .message-body .markdown-link {
            color: var(--text-accent);
            text-decoration: underline;
            transition: color 0.2s ease;
        }

        .message-body .markdown-link:hover {
            color: var(--text-primary);
            text-decoration: none;
        }

        /* Lists */
        .message-body .markdown-list,
        .message-body .markdown-ordered-list {
            margin: 8px 0;
            padding-left: 20px;
        }

        .message-body .markdown-list-item,
        .message-body .markdown-ordered-item {
            margin: 4px 0;
            line-height: 1.4;
            color: var(--text-primary);
        }

        .message-body .markdown-list {
            list-style-type: disc;
        }

        .message-body .markdown-ordered-list {
            list-style-type: decimal;
        }

        /* Blockquotes */
        .message-body .markdown-blockquote {
            margin: 12px 0;
            padding: 8px 16px;
            background: rgba(213, 116, 85, 0.1);
            border-left: 4px solid var(--text-accent);
            border-radius: 0 4px 4px 0;
            color: var(--text-primary);
            font-style: italic;
        }

        /* Horizontal rules */
        .message-body .markdown-hr {
            margin: 16px 0;
            border: none;
            height: 1px;
            background: var(--border-primary);
        }

        /* Paragraphs */
        .message-body .markdown-paragraph {
            margin: 6px 0;
            line-height: 1.4;
            color: var(--text-primary);
        }

        /* Code blocks with language support */
        .message-body .code-block[data-language]::before {
            content: attr(data-language);
            position: absolute;
            top: 4px;
            right: 8px;
            font-size: 0.7rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            font-weight: 500;
        }

        .message-body .code-block {
            position: relative;
        }
        
        .back-btn {
            margin-bottom: 20px;
        }
        
        @media (max-width: 768px) {
            .stats-bar {
                gap: 20px;
            }
            
            .chart-controls {
                flex-direction: column;
                gap: 12px;
                align-items: stretch;
            }
            
            .chart-controls-left {
                flex-direction: column;
                gap: 12px;
            }
            
            .chart-controls-right {
                justify-content: center;
            }
            
            .charts-container {
                grid-template-columns: 1fr;
                gap: 20px;
                margin: 20px 0;
            }
            
            .chart-card {
                padding: 16px;
            }
            
            .chart-canvas {
                height: 180px !important;
            }
            
            .filter-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            
            .sessions-table {
                font-size: 0.8rem;
            }
            
            /* Mobile-first Agents page layout */
            .agents-page {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: var(--bg-primary);
                z-index: 1000;
                display: flex;
                flex-direction: column;
                max-width: none;
                margin: 0;
                overflow: hidden;
            }
            
            /* Hide main page sidebar and other elements on mobile Agents page */
            body:has(.agents-page) .sidebar:not(.mobile-chat-submenu),
            .agents-page .terminal-header,
            .agents-page .conversations-filters,
            .agents-page .agents-section,
            .agents-page .conversations-sidebar,
            .agents-page .conversations-loading,
            .agents-page .conversations-error {
                display: none !important;
            }
            
            /* Show mobile menu button initially */
            .agents-page .mobile-menu-btn {
                display: flex !important;
                position: fixed;
                top: 10px;
                left: 10px;
                z-index: 1200;
                background: var(--bg-secondary);
                border: 1px solid var(--border-primary);
            }
            
            /* Hide mobile menu button when viewing chat */
            body:has(.mobile-chat-header-bar[style*="flex"]) .mobile-menu-btn {
                display: none !important;
            }
            
            /* Hide page header on mobile Agents page */
            .agents-page #agents-header-container {
                display: none !important;
            }
            
            /* Mobile header for chat */
            .mobile-chat-header-bar {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: 60px;
                background: var(--bg-secondary);
                border-bottom: 1px solid var(--border-primary);
                z-index: 1100;
                display: flex;
                align-items: center;
                padding: 0 16px;
                gap: 12px;
            }
            
            .mobile-back-btn {
                background: none;
                border: none;
                color: var(--text-accent);
                font-size: 20px;
                cursor: pointer;
                padding: 8px;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 40px;
                height: 40px;
            }
            
            .mobile-back-btn:hover {
                background: var(--bg-tertiary);
            }
            
            .mobile-chat-title {
                flex: 1;
                font-size: 1rem;
                color: var(--text-primary);
                font-weight: 600;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            
            .mobile-chat-subtitle {
                font-size: 0.8rem;
                color: var(--text-secondary);
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            
            /* Full-screen chat panel on mobile */
            .conversation-details {
                position: fixed;
                top: 60px;
                left: 0;
                right: 0;
                bottom: 0;
                background: var(--bg-primary);
                z-index: 1000;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }
            
            .conversation-header {
                display: none !important;
            }
            
            .messages-panel {
                flex: 1;
                padding: 16px;
                overflow-y: auto;
                background: var(--bg-primary);
            }
            
            /* Ensure mobile menu button is visible */
            .mobile-menu-btn {
                display: flex !important;
                position: fixed;
                top: 10px;
                left: 10px;
                z-index: 1200;
                background: var(--bg-secondary);
                border: 1px solid var(--border-primary);
            }
            
            .sessions-table th,
            .sessions-table td {
                padding: 6px 8px;
            }
            
            .header-actions {
                position: relative;
                margin-top: 12px;
                align-self: flex-start;
                gap: 12px;
            }
            
            .github-star-btn {
                position: relative;
                margin-top: 0;
                align-self: flex-start;
            }
            
            
            .terminal-header {
                display: flex;
                flex-direction: column;
            }
        }
        
        /* ==========================
           MODULAR APP STYLES
        ========================== */
        
        /* App Layout */
        .app {
            display: flex;
            min-height: 100vh;
            background: var(--bg-primary);
        }
        
        .app-sidebar {
            width: 60px;
            min-width: 60px;
            background: transparent;
            border: none;
            transition: width 0.3s ease;
        }
        
        .app-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-left: 56px;
            transition: margin-left 0.3s ease;
        }
        
        .app-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        
        /* Mobile menu button - hidden on desktop, shown on mobile */
        .mobile-menu-btn {
            display: none;
        }
        
        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: flex !important;
            }
            
            .mobile-chat-submenu {
                /* This submenu is no longer used - navigation goes to separate page */
                display: none !important;
            }
            
            .mobile-chat-submenu.active {
                display: none !important;
            }
            
            .mobile-chat-header {
                padding: 16px 20px;
                border-bottom: 1px solid var(--border-primary);
                background: var(--bg-secondary);
                display: flex;
                align-items: center;
                gap: 12px;
            }
            
            .mobile-chat-header h3 {
                margin: 0;
                font-size: 1.1rem;
                color: var(--text-primary);
                font-weight: 600;
            }
            
            .mobile-chat-close {
                background: none;
                border: none;
                color: var(--text-secondary);
                font-size: 1.2rem;
                cursor: pointer;
                padding: 4px;
                margin-left: auto;
                transition: color 0.2s ease;
            }
            
            .mobile-chat-close:hover {
                color: var(--text-primary);
            }
            
            .mobile-chat-item {
                cursor: pointer;
                transition: background-color 0.2s ease;
            }
            
            .mobile-chat-item:hover {
                background: rgba(33, 38, 45, 0.6);
            }
        }
        
        .mobile-overlay {
            display: none;
        }
        
        /* Minimalist Console Sidebar */
        .sidebar {
            width: 56px;
            height: 100vh;
            background: var(--bg-primary);
            border-right: 1px solid var(--border-primary);
            display: flex;
            flex-direction: column;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
            overflow: visible;
        }
        
        .sidebar.hover-expanded {
            width: 220px;
            background: var(--bg-secondary);
            border-right: 1px solid var(--text-accent);
            box-shadow: 4px 0 16px rgba(213, 116, 85, 0.1);
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
        }
        
        .sidebar-header {
            padding: 16px 8px;
            border-bottom: 1px solid var(--border-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 60px;
        }
        
        .sidebar.hover-expanded .sidebar-header {
            justify-content: flex-start;
            padding: 16px 20px;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s ease;
            cursor: default;
        }
        
        .logo-icon {
            color: var(--text-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            flex-shrink: 0;
        }
        
        .logo-icon svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }
        
        .logo-text {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-primary);
            white-space: nowrap;
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.3s ease;
            letter-spacing: 0.5px;
        }
        
        .sidebar.hover-expanded .logo-text {
            opacity: 1;
            transform: translateX(0);
        }
        
        .sidebar-content {
            flex: 1;
            padding: 20px 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .sidebar.hover-expanded .sidebar-content {
            align-items: stretch;
            padding: 20px 8px;
        }
        
        .nav-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        
        .nav-item {
            margin-bottom: 8px;
            position: relative;
        }
        
        .nav-link {
            display: block;
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.3s ease;
            border-radius: 8px;
            position: relative;
            height: 40px;
            width: 40px;
            margin: 6px auto;
        }
        
        .sidebar.hover-expanded .nav-link {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            padding: 8px 16px;
            width: auto;
            margin: 4px 8px;
        }
        
        .nav-link:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            transform: translateY(-1px);
        }
        
        .nav-item.active .nav-link {
            background: var(--bg-tertiary);
            color: var(--text-accent);
            box-shadow: 0 0 0 1px var(--text-accent);
        }
        
        .nav-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            flex-shrink: 0;
            color: var(--text-primary);  /* Changed from text-secondary to text-primary for better visibility */
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .nav-item.active .nav-icon {
            color: var(--text-accent);
        }
        
        .sidebar.hover-expanded .nav-icon {
            color: inherit;
            width: 24px;
            height: 24px;
            position: static;
        }
        
        .nav-icon svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
            display: block;
        }
        
        .nav-text {
            font-size: 0.85rem;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
        }
        
        .sidebar.hover-expanded .nav-text {
            opacity: 1;
            transform: translateX(0);
        }
        
        /* Tooltip for collapsed state */
        .nav-item:not(.sidebar.hover-expanded .nav-item)::after {
            content: attr(title);
            position: absolute;
            left: 70px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--bg-primary);
            color: var(--text-primary);
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.8rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            border: 1px solid var(--border-primary);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 1001;
        }
        
        .nav-item:hover::after {
            opacity: 1;
            transform: translateY(-50%) translateX(8px);
        }
        
        .sidebar.hover-expanded .nav-item::after {
            display: none;
        }
        
        .sidebar-footer {
            padding: 16px 8px;
            border-top: 1px solid var(--border-primary);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .sidebar.hover-expanded .sidebar-footer {
            padding: 16px 20px;
            justify-content: flex-start;
        }
        
        .connection-status {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: default;
        }
        
        .sidebar.hover-expanded .connection-status {
            justify-content: flex-start;
        }
        
        .status-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--text-success);
            flex-shrink: 0;
        }
        
        .status-dot.connected {
            background: var(--text-success);
            animation: pulse 2s infinite;
            box-shadow: 0 0 8px rgba(63, 185, 80, 0.3);
        }
        
        .status-dot.disconnected {
            background: var(--text-error);
        }
        
        .status-text {
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
        }
        
        .sidebar.hover-expanded .status-text {
            opacity: 1;
            transform: translateX(0);
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            /* Disable hover functionality on mobile */
            .sidebar {
                width: 56px;
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 1001;
            }
            
            /* Remove hover expansion on mobile */
            .sidebar:hover {
                width: 56px;
                background: var(--bg-primary);
                border-right: 1px solid var(--border-primary);
                box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
            }
            
            /* Mobile open state */
            .sidebar.mobile-open {
                width: 280px;
                transform: translateX(0);
                background: var(--bg-secondary);
                border-right: 1px solid var(--text-accent);
                box-shadow: 4px 0 16px rgba(213, 116, 85, 0.1);
            }
            
            /* Force expanded state when mobile open */
            .sidebar.mobile-open .logo-text,
            .sidebar.mobile-open .nav-text,
            .sidebar.mobile-open .status-text {
                opacity: 1;
                transform: translateX(0);
            }
            
            .sidebar.mobile-open .nav-link {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 12px;
                padding: 8px 16px;
                width: auto;
                margin: 4px 8px;
            }
            
            .sidebar.mobile-open .nav-icon {
                width: 24px;
                height: 24px;
                position: static;
            }
            
            .sidebar.mobile-open .sidebar-header {
                justify-content: flex-start;
                padding: 16px 20px;
            }
            
            .sidebar.mobile-open .sidebar-footer {
                padding: 16px 20px;
                justify-content: flex-start;
            }
            
            .sidebar.mobile-open .connection-status {
                justify-content: flex-start;
            }
            
            /* App main content */
            .app-main {
                margin-left: 0;
            }
            
            /* Mobile overlay - covers everything but stays behind sidebar */
            .mobile-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 1000;
                transition: opacity 0.3s ease;
            }
            
            .mobile-overlay.active {
                display: block;
                opacity: 1;
            }
            
            /* Mobile menu button - transforms when open */
            .mobile-menu-btn {
                display: flex !important;
                position: fixed;
                top: 20px;
                left: 20px;
                z-index: 1002;
                background: var(--bg-secondary);
                border: 1px solid var(--border-primary);
                border-radius: 8px;
                width: 44px;
                height: 44px;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s ease;
                color: var(--text-primary);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            }
            
            /* When menu is open, move button and change appearance */
            .mobile-menu-btn.menu-open {
                left: 300px;
                background: var(--text-accent);
                color: white;
                border-color: var(--text-accent);
                transform: rotate(180deg);
            }
            
            .mobile-menu-btn:hover {
                background: var(--bg-tertiary);
                color: var(--text-accent);
            }
            
            .mobile-menu-btn.menu-open:hover {
                background: #c85a3a;
                color: white;
            }
            
            .mobile-menu-btn .menu-icon {
                font-size: 20px;
                transition: all 0.3s ease;
            }
            
            .nav-link {
                padding: 10px;
                height: 40px;
                min-width: 40px;
            }
            
            .sidebar-header,
            .sidebar-footer {
                padding: 12px 0;
            }
            
            .page-header {
                margin-left: 0;
                padding-left: 70px;
            }
            
            .header-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }
            
            .header-right {
                align-self: stretch;
                justify-content: flex-end;
            }
            
            .page-title {
                font-size: 1.25rem;
            }
            
            .page-subtitle {
                font-size: 0.8rem;
            }
            
            .last-update-header {
                font-size: 0.7rem;
            }
            
            .github-link {
                font-size: 0.8rem;
                padding: 4px 8px;
            }
        }
        
        /* Page Styles */
        .page-header {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-primary);
        }
        
        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .header-left {
            text-align: left;
        }
        
        .header-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .status-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 4px;
        }
        
        .session-timer-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--text-secondary);
            animation: pulse 2s infinite;
        }
        
        .session-timer-status-dot.active {
            background: var(--text-success);
        }
        
        .page-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1.5rem;
            color: var(--text-primary);
            margin: 0;
        }
        
        .version-badge {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            color: var(--text-secondary);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: normal;
        }
        
        .page-subtitle {
            color: var(--text-secondary);
            font-size: 0.875rem;
            margin: 4px 0;
        }
        
        .last-update-header {
            color: var(--text-secondary);
            font-size: 0.75rem;
            margin-top: 4px;
        }
        
        .last-update-label {
            color: var(--text-secondary);
        }
        
        
        .github-link {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            color: var(--text-secondary);
            padding: 6px 12px;
            border-radius: 6px;
            text-decoration: none;
            font-size: 0.875rem;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .github-link:hover {
            border-color: var(--text-accent);
            color: var(--text-accent);
            background: var(--bg-secondary);
        }
        
        .github-icon {
            font-size: 0.75rem;
        }
        
        /* Metrics Cards */
        .metrics-cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0 30px 0;
        }
        
        @media (max-width: 640px) {
            .metrics-cards-container {
                grid-template-columns: 1fr;
                gap: 16px;
                margin: 16px 0 20px 0;
            }
        }
        
        .metric-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 20px;
            transition: all 0.2s ease;
            display: flex;
            flex-direction: column;
            gap: 16px;
            min-height: 220px;
            max-height: 260px;
            overflow: hidden;
        }
        
        .metric-card:hover {
            border-color: var(--text-accent);
            background: var(--bg-tertiary);
            transform: translateY(-2px);
            box-shadow: 0 8px 16px var(--shadow-primary);
        }
        
        .metric-primary {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            flex-shrink: 0;
        }
        
        .metric-primary-value {
            display: block;
            font-size: 2rem;
            font-weight: bold;
            color: var(--text-accent);
            line-height: 1;
            margin-bottom: 6px;
            word-break: break-all;
            overflow-wrap: break-word;
        }
        
        .metric-primary-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .metric-secondary {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1;
            overflow-y: auto;
            padding: 14px 0 0 0;
            border-top: 1px solid var(--border-primary);
            min-height: 130px;
        }
        
        .metric-secondary-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            min-height: 28px;
        }
        
        .metric-secondary-item:last-child {
            border-bottom: none;
        }
        
        .metric-secondary-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            flex-shrink: 0;
            margin-right: 12px;
        }
        
        .metric-secondary-value {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-primary);
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 90%;
        }
        
        /* Responsive design for metrics cards */
        @media (max-width: 1024px) {
            .metrics-cards-container {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 16px;
            }
        }
        
        @media (max-width: 768px) {
            .metrics-cards-container {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            
            .metric-card {
                padding: 18px;
                min-height: 200px;
                max-height: 240px;
                gap: 14px;
            }
            
            .metric-primary-value {
                font-size: 1.8rem;
            }
        }
        
        @media (max-width: 480px) {
            .metric-card {
                padding: 16px;
                min-height: 180px;
                max-height: 220px;
                gap: 12px;
            }
            
            .metric-primary-value {
                font-size: 1.6rem;
            }
            
            .metric-secondary {
                gap: 4px;
            }
            
            .metric-secondary-item {
                padding: 4px 0;
                min-height: 28px;
            }
            
            .metric-secondary-label {
                font-size: 0.75rem;
            }
            
            .metric-secondary-value {
                font-size: 0.8rem;
                max-width: 100%;
            }
        }
        
        /* Agent Conversations Page Styles */
        .conversations-header {
            margin-bottom: 20px;
        }
        
        /* Agents Section Styling */
        .agents-section {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 16px;
        }
        
        .agents-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .agents-header h4 {
            margin: 0;
            color: var(--text-primary);
            font-size: 1em;
            font-weight: 600;
        }
        
        .agents-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .agents-count {
            color: var(--text-secondary);
            font-size: 0.9em;
        }
        
        .refresh-agents-btn {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 4px;
            padding: 6px 8px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .refresh-agents-btn:hover {
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        
        .agent-story-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-width: 60px;
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        
        .agent-story-item:hover {
            transform: scale(1.05);
        }
        
        .agent-story-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--text-accent), #f97316);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            font-weight: 600;
            color: white;
            position: relative;
            border: 2px solid transparent;
            transition: all 0.2s ease;
        }
        
        .agent-story-avatar.active {
            border-color: var(--text-accent);
            box-shadow: 0 0 0 2px rgba(213, 116, 85, 0.2);
        }
        
        .agent-story-name {
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-align: center;
            max-width: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .agent-story-status {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid var(--bg-primary);
            background: var(--text-success);
        }
        
        /* Mobile responsive */
        @media (max-width: 768px) {
            .agents-stories-container {
                padding: 0 16px;
            }
            
            .agents-stories {
                gap: 10px;
            }
            
            .agent-story-item {
                min-width: 50px;
            }
            
            .agent-story-avatar {
                width: 48px;
                height: 48px;
                font-size: 1.2rem;
            }
            
            .agent-story-name {
                font-size: 0.7rem;
                max-width: 50px;
            }
        }
        
        .agent-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 4px;
            padding: 4px 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.85em;
            white-space: nowrap;
            width: fit-content;
        }
        
        .agent-item:hover {
            background: var(--bg-primary);
            border-color: var(--border-secondary);
            transform: translateY(-1px);
        }
        
        .agent-item.selected {
            background: var(--bg-primary);
            border-color: var(--text-accent);
            box-shadow: 0 0 0 1px var(--text-accent);
        }
        
        .agent-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .agent-name {
            color: var(--text-primary);
            font-weight: 500;
        }
        
        .agent-level-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 16px;
            height: 16px;
            border-radius: 50%;
            font-size: 0.65em;
            font-weight: bold;
            color: white;
            flex-shrink: 0;
            line-height: 1;
        }
        
        .agent-level-badge.project {
            background: none;
            color: #ffa500;
        }
        
        .agent-level-badge.user {
            background: none;
            color: #00d4aa;
        }
        
        
        /* Agent Modal Styling */
        .agent-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            backdrop-filter: blur(2px);
        }
        
        .agent-modal {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            width: 95%;
            max-width: 900px;
            max-height: 85vh;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        }
        
        .agent-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-primary);
            background: var(--bg-tertiary);
        }
        
        .agent-modal-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .agent-title-main {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .agent-title-info h3 {
            margin: 0 0 4px 0;
            color: var(--text-primary);
            font-size: 1.3em;
            font-weight: 600;
        }
        
        .agent-subtitle {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85em;
        }
        
        .agent-project-name {
            color: var(--text-secondary);
            font-style: italic;
        }
        
        .agent-modal-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5em;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }
        
        .agent-modal-close:hover {
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        
        .agent-modal-content {
            padding: 20px;
            max-height: calc(80vh - 80px);
            overflow-y: auto;
        }
        
        .agent-info-section {
            margin-bottom: 20px;
        }
        
        .agent-info-section h4 {
            margin: 0 0 8px 0;
            color: var(--text-accent);
            font-size: 0.95em;
            font-weight: 600;
        }
        
        .agent-info-section p {
            margin: 0;
            color: var(--text-primary);
            line-height: 1.5;
        }
        
        .agent-system-prompt {
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            border-radius: 4px;
            padding: 12px;
            color: var(--text-primary);
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 0.85em;
            line-height: 1.4;
            white-space: pre-wrap;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .agent-usage-tips {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            padding: 16px;
            margin: 20px 0;
        }
        
        .agent-usage-tips h4 {
            margin: 0 0 12px 0;
            color: var(--text-accent);
            font-size: 1em;
        }
        
        .usage-tips-content p {
            margin: 8px 0;
            color: var(--text-primary);
        }
        
        .usage-tips-content ul {
            margin: 8px 0;
            padding-left: 20px;
            color: var(--text-primary);
        }
        
        .usage-tips-content li {
            margin: 4px 0;
        }
        
        .usage-example {
            display: inline-block;
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            border-radius: 4px;
            padding: 6px 10px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 0.85em;
            color: var(--text-success);
            margin: 4px 0;
        }
        
        .usage-tips-content code {
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            border-radius: 3px;
            padding: 2px 4px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 0.85em;
            color: var(--text-info);
        }
        
        .agent-metadata {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid var(--border-primary);
            color: var(--text-secondary);
            font-size: 0.8em;
        }
        
        /* Project agents modal styling */
        .project-agents-modal {
            max-width: 700px;
        }
        
        .project-icon {
            font-size: 1.2em;
            margin-right: 4px;
        }
        
        .project-info {
            color: var(--text-primary);
            font-weight: 600;
        }
        
        .project-agents-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }
        
        .project-agent-card {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            padding: 12px;
            transition: all 0.2s ease;
        }
        
        .project-agent-card:hover {
            background: var(--bg-primary);
            border-color: var(--border-secondary);
        }
        
        .project-agent-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        
        .project-agent-info h4 {
            margin: 0;
            color: var(--text-primary);
            font-size: 0.95em;
            font-weight: 600;
        }
        
        .project-agent-description {
            color: var(--text-secondary);
            font-size: 0.85em;
            line-height: 1.4;
            margin-bottom: 10px;
        }
        
        .project-agent-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .project-agent-tools {
            color: var(--text-secondary);
            font-size: 0.75em;
        }
        
        .project-agent-details-btn {
            background: var(--text-accent);
            color: white;
            border: none;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 0.75em;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .project-agent-details-btn:hover {
            background: var(--text-warning);
        }
        
        .no-agents-message {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary);
        }
        
        .no-agents-icon {
            font-size: 3em;
            margin-bottom: 16px;
            opacity: 0.5;
        }
        
        .no-agents-message h4 {
            margin: 0 0 8px 0;
            color: var(--text-primary);
        }
        
        .no-agents-message p {
            margin: 4px 0;
            line-height: 1.5;
        }
        
        .no-agents-message code {
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            border-radius: 3px;
            padding: 2px 4px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 0.85em;
            color: var(--text-info);
        }
        
        .usage-instruction {
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            padding: 16px;
            margin-top: 20px;
        }
        
        .usage-instruction h4 {
            margin: 0 0 8px 0;
            color: var(--text-accent);
        }
        
        .usage-instruction p {
            margin: 0 0 10px 0;
            color: var(--text-primary);
        }
        
        .usage-examples {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        /* Conversation agents button */
        .sidebar-conversation-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 8px;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        
        .sidebar-conversation-item:hover .sidebar-conversation-actions {
            opacity: 1;
        }
        
        .conversation-agents-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 0.75em;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .conversation-agents-btn:hover {
            background: var(--text-accent);
            color: white;
            border-color: var(--text-accent);
        }
        
        .agents-icon {
            font-size: 0.9em;
        }
        
        .agents-text {
            font-weight: 500;
        }
        
        .agents-loading, .agents-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            color: var(--text-secondary);
            text-align: center;
        }
        
        .agents-empty .empty-icon {
            font-size: 2em;
            margin-bottom: 8px;
            opacity: 0.5;
        }
        
        .agents-empty p {
            margin: 0 0 4px 0;
            color: var(--text-primary);
        }
        
        .agents-empty small {
            color: var(--text-secondary);
            opacity: 0.8;
        }
        
        /* Agent indicators in conversations */
        .agent-indicator-small {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-left: 6px;
            vertical-align: middle;
        }
        
        .agent-badge {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 0.75em;
            font-weight: 500;
            color: white;
            margin-left: 8px;
            vertical-align: middle;
        }
        
        .conversations-filters {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .filters-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            align-items: flex-end;
            margin-bottom: 16px;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 150px;
            align-self: flex-end;
        }
        
        .filter-group.search-group {
            flex: 1;
            min-width: 250px;
            align-self: flex-end;
            gap: 8px;
        }
        
        .filter-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
            line-height: 1.2;
        }
        
        .filter-select {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            color: var(--text-primary);
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 0.875rem;
            font-family: inherit;
            height: 40px;
            box-sizing: border-box;
        }
        
        .filter-select:focus {
            outline: none;
            border-color: var(--text-accent);
            box-shadow: 0 0 0 2px rgba(213, 116, 85, 0.2);
        }
        
        .search-input-container {
            position: relative;
            display: flex;
            align-items: center;
            height: 40px;
            width: 100%;
        }
        
        .search-input {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            color: var(--text-primary);
            padding: 8px 12px;
            padding-right: 36px;
            border-radius: 4px;
            font-size: 0.875rem;
            font-family: inherit;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            margin: 0;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--text-accent);
            box-shadow: 0 0 0 2px rgba(213, 116, 85, 0.2);
        }
        
        .search-clear {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 1.2rem;
            padding: 4px;
            border-radius: 2px;
            transition: all 0.2s ease;
            height: 24px;
            width: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .search-clear:hover {
            color: var(--text-accent);
            background: var(--bg-primary);
        }
        
        .results-count {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }
        
        .clear-filters-btn {
            background: none;
            border: 1px solid var(--border-primary);
            color: var(--text-secondary);
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .clear-filters-btn:hover {
            border-color: var(--text-accent);
            color: var(--text-accent);
        }
        
        /* Two Column Layout */
        .conversations-layout {
            display: grid;
            grid-template-columns: 380px 1fr;
            gap: 0;
            height: calc(100vh - 200px);
            min-height: 600px;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border-primary);
            background: var(--bg-primary);
        }

        /* Left Sidebar - Chat List Style */
        .conversations-sidebar {
            background: var(--bg-secondary);
            border-right: 1px solid var(--border-primary);
            border-radius: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .sidebar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-primary);
            background: var(--bg-secondary);
        }

        .sidebar-header h3 {
            margin: 0;
            font-size: 1.25rem;
            color: var(--text-primary);
            font-weight: 700;
        }

        .conversation-count {
            background: var(--text-accent);
            color: white;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 12px;
            font-weight: 600;
        }

        .conversations-list {
            flex: 1;
            overflow-y: auto;
            padding: 0;
        }
        
        /* Load More Indicator */
        .load-more-indicator {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            gap: 12px;
            border-top: 1px solid var(--border-primary);
            background: var(--bg-secondary);
            margin: 8px;
            border-radius: 6px;
        }
        
        .load-more-indicator .loading-spinner {
            width: 20px;
            height: 20px;
        }
        
        .load-more-indicator .loading-text {
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        /* Sidebar Conversation Items - Chat Thread Style */
        .sidebar-conversation-item {
            padding: 16px 24px;
            margin-bottom: 0;
            border-radius: 0;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            border-bottom: 1px solid rgba(48, 54, 61, 0.3);
            position: relative;
        }

        .sidebar-conversation-item:hover {
            background: rgba(33, 38, 45, 0.6);
        }

        .sidebar-conversation-item.selected {
            background: rgba(213, 116, 85, 0.1);
            border-left: 3px solid var(--text-accent);
            padding-left: 21px;
        }

        .sidebar-conversation-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .sidebar-conversation-title {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            min-width: 0;
        }

        .sidebar-conversation-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }

        .sidebar-conversation-badge {
            font-size: 0.65rem;
            padding: 2px 6px;
            border-radius: 10px;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.3px;
            flex-shrink: 0;
        }

        .sidebar-conversation-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 6px;
        }

        .sidebar-meta-item {
            display: flex;
            align-items: center;
            gap: 3px;
            font-size: 0.7rem;
            color: var(--text-secondary);
        }

        .sidebar-meta-icon {
            font-size: 0.65rem;
            opacity: 0.8;
        }

        .sidebar-conversation-preview {
            margin-top: 4px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .sidebar-preview-text {
            font-size: 0.85rem;
            color: var(--text-secondary);
            line-height: 1.3;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }
        
        .sidebar-preview-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
            white-space: nowrap;
            opacity: 0.8;
        }
        
        .chat-avatar {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            background: linear-gradient(135deg, var(--text-accent), #f97316);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            font-weight: 600;
            color: white;
            flex-shrink: 0;
        }
        
        .unread-indicator {
            width: 20px;
            height: 20px;
            background: var(--text-accent);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
            color: white;
            margin-left: 8px;
        }
        
        .sidebar-conversation-info {
            flex: 1;
            min-width: 0;
        }
        
        .sidebar-conversation-time {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 2px;
        }

        /* Right Panel - Chat Messages Style */
        .messages-panel {
            background: var(--bg-primary);
            border: none;
            border-radius: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .messages-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
            border-bottom: 1px solid var(--border-primary);
            background: var(--bg-secondary);
            min-height: 72px;
        }

        .selected-conversation-info h3 {
            margin: 0 0 4px 0;
            font-size: 1.2rem;
            color: var(--text-primary);
            font-weight: 700;
        }


        .messages-actions {
            display: flex;
            gap: 8px;
        }

        .messages-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        
        /* Message Input Area */
        .message-input-area {
            border-top: 1px solid var(--border-primary);
            padding: 12px 20px;
            background: var(--bg-secondary);
        }
        
        .input-container {
            display: flex;
            flex-direction: column;
        }
        
        .input-row {
            display: flex;
            gap: 8px;
            align-items: flex-end;
        }
        
        .message-input {
            flex: 1;
            min-height: 36px;
            max-height: 120px;
            padding: 8px 12px;
            border: 1px solid var(--border-primary);
            border-radius: 18px;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.9rem;
            line-height: 1.4;
            resize: none;
            transition: all 0.2s ease;
        }
        
        .message-input:focus {
            outline: none;
            border-color: var(--text-accent);
            background: var(--bg-primary);
        }
        
        .message-input::placeholder {
            color: var(--text-secondary);
        }
        
        .send-btn {
            background: var(--text-accent);
            color: white;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }
        
        .send-btn:hover:not(:disabled) {
            background: #c85a3a;
            transform: scale(1.05);
        }
        
        .send-btn:disabled {
            background: var(--text-secondary);
            cursor: not-allowed;
            opacity: 0.6;
        }

        /* No Conversation Selected State */
        .no-conversation-selected {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            color: var(--text-secondary);
            padding: 40px 20px;
        }

        .no-selection-icon {
            font-size: 4rem;
            margin-bottom: 20px;
            opacity: 0.6;
        }

        .no-conversation-selected h4 {
            margin: 0 0 12px 0;
            font-size: 1.3rem;
            color: var(--text-primary);
            font-weight: 600;
        }

        .no-conversation-selected p {
            margin: 0;
            font-size: 1rem;
            opacity: 0.8;
            line-height: 1.5;
        }

        /* No Messages Found State */
        .no-messages-found {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            color: var(--text-secondary);
        }

        .no-messages-icon {
            font-size: 3rem;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        .no-messages-found h4 {
            margin: 0 0 8px 0;
            font-size: 1.2rem;
            color: var(--text-primary);
        }

        .no-messages-found p {
            margin: 0;
            font-size: 0.9rem;
        }

        /* Messages List */
        .messages-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .message {
            margin-bottom: 12px;
            display: flex;
            width: 100%;
        }
        
        .message-bubble {
            max-width: 60%;
            padding: 10px 14px;
            border-radius: 16px;
            position: relative;
            word-wrap: break-word;
            font-size: 0.9rem;
            line-height: 1.4;
        }

        .message-user {
            justify-content: flex-end;
            margin-bottom: 8px;
        }
        
        .message-user .message-bubble {
            background: #2fa95c;
            color: white;
            border-bottom-right-radius: 4px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .message-assistant {
            justify-content: flex-start;
            margin-bottom: 8px;
        }
        
        .message-assistant .message-bubble {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border-primary);
            border-bottom-left-radius: 4px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }
        
        .message-content {
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .message-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.75rem;
            opacity: 0.7;
            margin-top: 4px;
        }
        
        .message-user .message-meta {
            justify-content: flex-end;
            color: rgba(255, 255, 255, 0.7);
        }
        
        .message-assistant .message-meta {
            justify-content: flex-start;
            color: var(--text-secondary);
        }
        
        .message-time {
            font-size: 0.7rem;
        }
        
        .tool-indicator, .token-indicator {
            font-size: 0.6rem;
            padding: 1px 3px;
            background: rgba(0, 0, 0, 0.15);
            border-radius: 3px;
            opacity: 0.8;
        }
        
        .message-user .tool-indicator,
        .message-user .token-indicator {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .messages-list {
            padding: 20px;
            max-width: 100%;
        }

        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: var(--bg-tertiary);
            border-bottom: 1px solid var(--border-primary);
        }

        .message-role {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .role-icon {
            font-size: 1rem;
        }

        .role-name {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.875rem;
        }

        .message-meta {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .message-timestamp {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .message-tokens, .message-tools {
            font-size: 0.7rem;
            color: var(--text-secondary);
            background: var(--bg-secondary);
            padding: 2px 6px;
            border-radius: 4px;
        }

        .message-content {
            padding: 16px;
        }

        .message-text {
            color: var(--text-primary);
            line-height: 1.6;
            font-size: 0.9rem;
        }

        /* Code Formatting */
        .code-block {
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            border-radius: 4px;
            padding: 12px;
            margin: 12px 0;
            overflow-x: auto;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.85rem;
        }

        .inline-code {
            background: var(--bg-tertiary);
            color: var(--text-accent);
            padding: 2px 4px;
            border-radius: 2px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.85rem;
        }

        /* Loading and Error States */
        .messages-loading, .messages-error {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 200px;
            gap: 16px;
            color: var(--text-secondary);
        }

        .loading-spinner {
            width: 24px;
            height: 24px;
            border: 2px solid var(--border-primary);
            border-top: 2px solid var(--text-accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .loading-spinner.small {
            width: 16px;
            height: 16px;
            border-width: 1px;
        }

        .messages-loading-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            color: var(--text-secondary);
            font-size: 0.8rem;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-primary);
        }

        .retry-messages {
            background: var(--text-accent);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.875rem;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .conversations-layout {
                grid-template-columns: 320px 1fr;
            }
        }

        @media (max-width: 768px) {
            .conversations-layout {
                grid-template-columns: 1fr;
                grid-template-rows: 1fr;
                gap: 0;
                height: calc(100vh - 120px);
            }
            
            .conversations-sidebar {
                display: none; /* Hide on mobile, will be in hamburger menu */
            }
            
            .messages-panel {
                border: none;
                border-radius: 0;
            }
            
            .chat-avatar {
                width: 36px;
                height: 36px;
                font-size: 1rem;
            }
            
            .message-bubble {
                max-width: 80%;
                padding: 8px 12px;
                font-size: 0.85rem;
            }
            
            .message-input-area {
                padding: 12px 16px;
            }
            
            .messages-header {
                padding: 12px 20px;
                min-height: 60px;
            }
        }
        
        /* Status Dot Styles (reused in sidebar) */
        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }
        
        .status-dot.status-active {
            background: var(--text-success);
            box-shadow: 0 0 6px rgba(63, 185, 80, 0.4);
        }
        
        .status-dot.status-idle {
            background: var(--text-warning);
        }
        
        .status-dot.status-waiting {
            background: var(--text-info);
        }
        
        .status-dot.status-completed {
            background: var(--text-secondary);
        }
        
        .status-dot.status-unknown {
            background: var(--text-error);
        }
        
        /* Badge Styles (reused in sidebar) */
        .sidebar-conversation-badge.status-active {
            background: rgba(63, 185, 80, 0.2);
            color: var(--text-success);
        }
        
        .sidebar-conversation-badge.status-idle {
            background: rgba(249, 115, 22, 0.2);
            color: var(--text-warning);
        }
        
        .sidebar-conversation-badge.status-waiting {
            background: rgba(165, 214, 255, 0.2);
            color: var(--text-info);
        }
        
        .sidebar-conversation-badge.status-completed {
            background: rgba(125, 133, 144, 0.2);
            color: var(--text-secondary);
        }
        
        .sidebar-conversation-badge.status-unknown {
            background: rgba(248, 81, 73, 0.2);
            color: var(--text-error);
        }

        /* Additional state classes for new conversation states */
        .status-dot.status-typing {
            background: var(--text-info);
        }
        
        .status-dot.status-pending {
            background: var(--text-warning);
        }
        
        .status-dot.status-recent {
            background: var(--text-success);
        }
        
        .status-dot.status-inactive {
            background: var(--text-secondary);
        }
        
        .status-dot.status-old {
            background: var(--text-secondary);
            opacity: 0.5;
        }

        .sidebar-conversation-badge.status-typing {
            background: rgba(165, 214, 255, 0.2);
            color: var(--text-info);
        }
        
        .sidebar-conversation-badge.status-pending {
            background: rgba(249, 115, 22, 0.2);
            color: var(--text-warning);
        }
        
        .sidebar-conversation-badge.status-recent {
            background: rgba(63, 185, 80, 0.2);
            color: var(--text-success);
        }
        
        .sidebar-conversation-badge.status-inactive {
            background: rgba(125, 133, 144, 0.2);
            color: var(--text-secondary);
        }
        
        .sidebar-conversation-badge.status-old {
            background: rgba(125, 133, 144, 0.1);
            color: var(--text-secondary);
            opacity: 0.7;
        }
        
        /* Meta Item Styles (reused) */
        .meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .meta-icon {
            font-size: 0.75rem;
            opacity: 0.8;
        }
        
        .header-actions {
            display: flex;
            gap: 12px;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            color: var(--text-primary);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: inherit;
            font-size: 0.875rem;
        }
        
        .action-btn:hover {
            border-color: var(--text-accent);
            background: var(--border-primary);
        }
        
        .action-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .btn-icon {
            font-size: 0.875rem;
        }
        
        /* Global Loading */
        .global-loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(13, 17, 23, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        
        .loading-content {
            text-align: center;
            color: var(--text-primary);
        }
        
        .loading-spinner.large {
            width: 40px;
            height: 40px;
            margin-bottom: 16px;
        }
        
        /* Error Modal */
        .error-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
        }
        
        .error-modal-content {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .error-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px;
            border-bottom: 1px solid var(--border-primary);
        }
        
        .error-modal-header h3 {
            margin: 0;
            color: var(--text-error);
        }
        
        .error-modal-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 4px;
        }
        
        .error-modal-body {
            padding: 20px;
        }
        
        .error-modal-message {
            color: var(--text-primary);
            margin: 0;
        }
        
        .error-modal-footer {
            padding: 20px;
            border-top: 1px solid var(--border-primary);
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }
        
        .btn {
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }
        
        .btn-primary {
            background: var(--text-accent);
            color: white;
            border: 1px solid var(--text-accent);
        }
        
        .btn-primary:hover {
            background: var(--text-error);
            border-color: var(--text-error);
        }
        
        .btn-secondary {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid var(--border-primary);
        }
        
        .btn-secondary:hover {
            background: var(--border-primary);
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .app-sidebar {
                position: fixed;
                left: -240px;
                z-index: 1000;
                height: 100vh;
            }
            
            .app-sidebar.open {
                left: 0;
            }
            
            .app-main {
                margin-left: 0;
            }
            
            .page-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }
            
            .header-actions {
                width: 100%;
                justify-content: flex-start;
            }
        }
        
        /* Animation Keyframes */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* Page Content Styles */
        .dashboard-page,
        .agents-page {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* App Layout Styles (App.js + Sidebar.js) - Duplicates removed, using definitions above */
        
        /* Metrics Section */
        .metrics-section {
            margin-bottom: 30px;
        }
        
        .section-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .section-title h2 {
            color: var(--text-primary);
            font-size: 1.25rem;
            margin: 0;
        }
        
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .metric-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 20px;
            transition: all 0.2s ease;
        }
        
        .metric-card:hover {
            border-color: var(--text-accent);
            transform: translateY(-2px);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .card-header h3 {
            color: var(--text-secondary);
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 0;
        }
        
        .card-icon {
            font-size: 1.25rem;
        }
        
        .card-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-accent);
            margin-bottom: 8px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        }
        
        .card-change {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }
        
        /* Loading and Error States */
        .loading-state,
        .error-state {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            text-align: center;
            color: var(--text-secondary);
        }
        
        .loading-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-primary);
            border-top: 2px solid var(--text-accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 12px;
        }
        
        .error-state {
            color: var(--text-error);
            flex-direction: column;
            gap: 16px;
        }
        
        .error-retry {
            padding: 8px 16px;
            background: var(--text-error);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
        }

        /* Conversation State Banner */
        .conversation-state-banner {
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border-primary);
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.8rem;
            z-index: 100;
        }

        .state-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .state-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--text-secondary);
            transition: background-color 0.3s ease;
        }

        .state-dot.status-active {
            background: var(--text-success);
            animation: pulse 2s infinite;
        }

        .state-dot.status-waiting {
            background: var(--text-info);
        }

        .state-dot.status-typing {
            background: var(--text-warning);
            animation: pulse 1.5s infinite;
        }

        .state-dot.status-working {
            background: var(--text-accent);
            animation: pulse 1s infinite;
        }

        .state-dot.status-idle {
            background: var(--text-secondary);
        }

        /* Enhanced state styles */
        .state-dot.status-tool-pending {
            background: #f97316;
            animation: pulse 2s infinite;
        }

        .state-dot.status-tool-executing {
            background: #10b981;
            animation: pulse 1s infinite;
        }

        .state-dot.status-analyzing {
            background: #8b5cf6;
            animation: pulse 1.5s infinite;
        }

        .state-dot.status-loading {
            background: var(--text-info);
            animation: pulse 2s infinite;
        }

        /* New enhanced state styles */
        .state-dot.status-completed {
            background: #10b981;
            animation: none;
        }

        .state-dot.status-processing {
            background: #3b82f6;
            animation: pulse 1.2s infinite;
        }

        .state-dot.status-error {
            background: #ef4444;
            animation: pulse 0.8s infinite;
        }

        .state-dot.status-fetching {
            background: #06b6d4;
            animation: pulse 1.5s infinite;
        }

        .state-text {
            color: var(--text-primary);
            font-weight: 500;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .state-text-main {
            font-size: 0.85rem;
            font-weight: 600;
            line-height: 1.2;
        }

        .state-text-description {
            font-size: 0.7rem;
            color: var(--text-secondary);
            font-weight: 400;
            line-height: 1.1;
        }

        .state-timestamp {
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-align: right;
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .timestamp-label {
            font-size: 0.65rem;
            opacity: 0.7;
        }

        .timestamp-value {
            font-weight: 600;
            font-family: 'Monaco', monospace;
        }

        /* Pulse animation for active states */
        .pulse-animation {
            animation: enhanced-pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }

        @keyframes enhanced-pulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.6;
                transform: scale(1.1);
            }
        }

        /* Improved conversation state banner layout */
        .conversation-state-banner {
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
            border-top: 2px solid var(--border-primary);
            padding: 14px 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.8rem;
            z-index: 100;
            box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        }

        .state-indicator {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
        }

        /* Console Interaction Panel Styles */
        .console-interaction-panel {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
        }

        .console-interaction-panel .interaction-content {
            background: var(--bg-secondary);
            border: 2px solid var(--border-primary);
            border-radius: 12px;
            padding: 24px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .interaction-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-primary);
        }

        .interaction-title {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-primary);
            font-weight: 600;
            font-size: 1.1rem;
        }

        .interaction-icon {
            font-size: 1.2rem;
            color: var(--text-warning);
        }

        .interaction-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .interaction-close:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .interaction-description {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 16px;
            font-family: 'Monaco', monospace;
            font-size: 0.85rem;
        }

        .tool-action {
            color: var(--text-primary);
        }

        .tool-details {
            margin-top: 8px;
            color: var(--text-secondary);
            font-size: 0.8rem;
            line-height: 1.4;
            white-space: pre-wrap;
        }

        .interaction-prompt {
            font-size: 1rem;
            color: var(--text-primary);
            font-weight: 600;
            margin-bottom: 20px;
            text-align: center;
        }

        .interaction-choices {
            margin-bottom: 20px;
        }

        .interaction-choice {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px;
            margin-bottom: 8px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .interaction-choice:hover {
            background: var(--bg-primary);
            border-color: var(--text-accent);
        }

        .interaction-choice input[type="radio"] {
            margin: 2px 0 0 0;
            cursor: pointer;
        }

        .choice-number {
            color: var(--text-accent);
            font-weight: 600;
            min-width: 20px;
        }

        .choice-text {
            color: var(--text-primary);
            line-height: 1.4;
            flex: 1;
        }

        .interaction-text-input {
            margin-bottom: 20px;
        }

        .interaction-text-input label {
            display: block;
            color: var(--text-primary);
            font-weight: 600;
            margin-bottom: 8px;
        }

        .interaction-text-input textarea {
            width: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 12px;
            color: var(--text-primary);
            font-family: 'Monaco', monospace;
            font-size: 0.9rem;
            resize: vertical;
            min-height: 100px;
        }

        .interaction-text-input textarea:focus {
            outline: none;
            border-color: var(--text-accent);
            background: var(--bg-primary);
        }

        .interaction-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .interaction-btn {
            padding: 10px 20px;
            border-radius: 6px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.9rem;
        }

        .interaction-btn.primary {
            background: var(--text-accent);
            color: white;
        }

        .interaction-btn.primary:hover {
            background: #c96543;
            transform: translateY(-1px);
        }

        .interaction-btn.secondary {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border: 1px solid var(--border-primary);
        }

        .interaction-btn.secondary:hover {
            background: var(--bg-primary);
            color: var(--text-primary);
            border-color: var(--text-secondary);
        }

        .interaction-error {
            background: rgba(248, 81, 73, 0.1);
            border: 1px solid var(--text-error);
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 16px;
            color: var(--text-error);
            font-size: 0.9rem;
            text-align: center;
        }

        /* Read Tool Modal Specific Styling */
        .read-tool-modal {
            max-width: 800px;
            max-height: 90vh;
        }

        .tool-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            color: var(--text-accent);
        }

        .tool-icon.read-tool {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            color: white;
            border: none;
        }

        .tool-type-badge {
            background: var(--bg-primary);
            color: var(--text-info);
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.75em;
            border: 1px solid var(--border-primary);
        }

        .tool-overview-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 24px;
        }

        .tool-description, .tool-capabilities {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            padding: 16px;
        }

        .capabilities-list {
            list-style: none;
            padding: 0;
            margin: 8px 0 0 0;
        }

        .capabilities-list li {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            color: var(--text-primary);
            font-size: 0.9em;
        }

        .capability-icon {
            font-size: 1.1em;
            width: 20px;
            text-align: center;
        }

        .tool-usage-section {
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            padding: 16px;
            margin-bottom: 20px;
        }

        .usage-details {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 12px;
        }

        .usage-param {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .param-label {
            color: var(--text-secondary);
            font-weight: 500;
            min-width: 100px;
        }

        .param-value {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 4px;
            padding: 4px 8px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 0.85em;
            color: var(--text-info);
            flex: 1;
        }

        .tool-parameters-section, .tool-examples-section, .tool-tips-section {
            margin-bottom: 24px;
        }

        .parameters-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 16px;
            margin-top: 12px;
        }

        .parameter-card {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            padding: 16px;
            transition: all 0.2s ease;
        }

        .parameter-card:hover {
            border-color: var(--text-accent);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .parameter-card.required {
            border-left: 3px solid var(--text-error);
        }

        .param-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .param-name {
            font-family: 'Monaco', 'Menlo', monospace;
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.9em;
        }

        .param-type {
            background: var(--bg-primary);
            color: var(--text-info);
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.75em;
            font-family: 'Monaco', 'Menlo', monospace;
        }

        .param-required {
            background: var(--text-error);
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.75em;
            font-weight: 500;
        }

        .param-optional {
            background: var(--text-secondary);
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.75em;
            font-weight: 500;
        }

        .param-description {
            color: var(--text-secondary);
            font-size: 0.85em;
            line-height: 1.4;
            margin: 0;
        }

        .examples-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
            margin-top: 12px;
        }

        .example-card {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            padding: 16px;
            transition: all 0.2s ease;
        }

        .example-card:hover {
            border-color: var(--text-accent);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .example-title {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
            font-size: 0.9em;
        }

        .example-code {
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            border-radius: 4px;
            padding: 10px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 0.8em;
            color: var(--text-success);
            margin: 8px 0;
            overflow-x: auto;
        }

        .example-desc {
            color: var(--text-secondary);
            font-size: 0.8em;
            margin: 0;
            line-height: 1.3;
        }

        .tips-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
            margin-top: 12px;
        }

        .tip-item {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            padding: 12px;
            transition: all 0.2s ease;
        }

        .tip-item:hover {
            border-color: var(--text-accent);
            transform: translateY(-1px);
        }

        .tip-icon {
            font-size: 1.1em;
            flex-shrink: 0;
        }

        .tip-text {
            color: var(--text-primary);
            font-size: 0.85em;
            font-weight: 500;
        }

        /* Project Context & Insights Styling */
        .read-operation-section, .file-insights-section, .raw-parameters-section, .compact-context-section {
            margin-bottom: 24px;
            padding: 16px;
            background: rgba(33, 38, 45, 0.5);
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }
        
        /* Primary Section - Tool Parameters */
        .primary-section {
            background: rgba(56, 139, 253, 0.08);
            border: 1px solid rgba(56, 139, 253, 0.3);
            margin-bottom: 24px;
            padding: 20px;
        }
        
        .primary-section h4 {
            color: #58a6ff;
            font-size: 1.1rem;
            margin-bottom: 16px;
        }
        
        /* Raw Parameters Section */
        .raw-params-container {
            background: rgba(13, 17, 23, 0.9);
            border: 1px solid rgba(48, 54, 61, 0.8);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 16px;
        }
        
        .params-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px;
        }
        
        .param-chip {
            background: rgba(56, 139, 253, 0.15);
            color: #58a6ff;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 0.8rem;
            font-weight: 500;
            border: 1px solid rgba(56, 139, 253, 0.3);
        }
        
        /* Compact Context Section */
        .compact-context-section {
            background: rgba(33, 38, 45, 0.3);
            border: 1px solid rgba(48, 54, 61, 0.5);
            padding: 12px;
        }
        
        .compact-context-section h4 {
            font-size: 0.95rem;
            margin-bottom: 12px;
            color: var(--text-secondary);
        }
        
        .compact-context-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 8px;
        }
        
        .compact-item {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            font-size: 0.85rem;
        }
        
        .compact-label {
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        .compact-value {
            color: var(--text-primary);
            text-align: right;
        }
        
        /* Edit Tool Modal Specific Styles */
        .agent-modal.edit-tool-modal .agent-modal-content {
            background: #0d1117;
            border: 1px solid #21262d;
        }
        
        .edit-changes-section {
            margin-bottom: 24px;
            padding: 20px;
            background: rgba(33, 38, 45, 0.5);
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }
        
        .diff-header-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .diff-header-section h4 {
            margin: 0;
        }
        
        .diff-mode-toggle {
            display: flex;
            gap: 4px;
            background: rgba(13, 17, 23, 0.6);
            border-radius: 6px;
            padding: 2px;
        }
        
        .diff-mode-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .diff-mode-btn:hover {
            background: rgba(56, 139, 253, 0.1);
            color: var(--text-primary);
        }
        
        .diff-mode-btn.active {
            background: rgba(56, 139, 253, 0.15);
            color: #58a6ff;
            font-weight: 500;
        }
        
        .diff-mode-btn span {
            font-size: 0.9rem;
        }
        
        /* Diff Editor Styles */
        .diff-container {
            background: rgba(13, 17, 23, 0.9);
            border-radius: 6px;
            border: 1px solid rgba(48, 54, 61, 0.8);
            overflow: hidden;
        }
        
        .diff-editor {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.8rem;
            line-height: 1.4;
        }
        
        .diff-header {
            background: rgba(22, 27, 34, 0.9);
            padding: 8px 12px;
            border-bottom: 1px solid rgba(48, 54, 61, 0.5);
            color: var(--text-secondary);
            font-size: 0.75rem;
        }
        
        .diff-stats {
            font-weight: 500;
        }
        
        .diff-section {
            max-height: 300px;
            overflow-y: auto;
        }
        
        .diff-line {
            display: flex;
            align-items: center;
            min-height: 20px;
            padding: 0;
            border-left: 3px solid transparent;
        }
        
        .diff-line:hover {
            background: rgba(56, 139, 253, 0.05);
        }
        
        .removed-line {
            background: rgba(248, 81, 73, 0.1);
            border-left-color: #f85149;
        }
        
        .removed-line:hover {
            background: rgba(248, 81, 73, 0.15);
        }
        
        .added-line {
            background: rgba(63, 185, 80, 0.1);
            border-left-color: #3fb950;
        }
        
        .added-line:hover {
            background: rgba(63, 185, 80, 0.15);
        }
        
        .line-prefix {
            width: 24px;
            text-align: center;
            font-weight: 600;
            padding: 2px 8px;
            user-select: none;
            font-size: 0.9rem;
        }
        
        .removed-line .line-prefix {
            color: #f85149;
        }
        
        .added-line .line-prefix {
            color: #3fb950;
        }
        
        .line-content {
            flex: 1;
            padding: 2px 12px;
            white-space: pre;
            overflow-x: auto;
        }
        
        .removed-line .line-content {
            color: #ffd6d6;
        }
        
        .added-line .line-content {
            color: #d6ffdd;
        }
        
        .truncated {
            background: rgba(125, 133, 144, 0.1);
            border-left-color: #7d8590;
        }
        
        .truncated .line-content {
            color: var(--text-muted);
            font-style: italic;
        }
        
        /* Scrollbar for diff sections */
        .diff-section::-webkit-scrollbar {
            width: 6px;
        }
        
        .diff-section::-webkit-scrollbar-track {
            background: rgba(22, 27, 34, 0.5);
        }
        
        .diff-section::-webkit-scrollbar-thumb {
            background: rgba(125, 133, 144, 0.5);
            border-radius: 3px;
        }
        
        .diff-section::-webkit-scrollbar-thumb:hover {
            background: rgba(125, 133, 144, 0.7);
        }
        
        /* Smart Diff Specific Styles */
        .smart-diff {
            background: rgba(13, 17, 23, 0.95);
        }
        
        .change-block {
            background: rgba(22, 27, 34, 0.5);
            border-radius: 4px;
            margin-bottom: 8px;
            overflow: hidden;
        }
        
        .change-separator {
            text-align: center;
            padding: 8px;
            color: var(--text-muted);
            font-size: 1.2rem;
            background: rgba(125, 133, 144, 0.1);
            margin: 8px 0;
            border-radius: 4px;
        }
        
        .no-changes {
            padding: 24px;
            text-align: center;
            background: rgba(22, 27, 34, 0.5);
            border-radius: 6px;
            border: 2px dashed rgba(125, 133, 144, 0.3);
        }
        
        .no-changes-text {
            color: var(--text-muted);
            font-style: italic;
        }
        
        .diff-line.smart {
            border-radius: 0;
            margin: 0;
        }
        
        .smart-diff .diff-line:first-child {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }
        
        .smart-diff .diff-line:last-child {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        }
        
        /* Write Tool Modal Specific Styles */
        .file-content-section {
            margin-bottom: 24px;
            padding: 16px;
            background: rgba(33, 38, 45, 0.5);
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }
        
        .content-header-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .content-header-section h4 {
            margin: 0;
        }
        
        .content-stats {
            display: flex;
            gap: 12px;
        }
        
        .content-stat {
            background: rgba(56, 139, 253, 0.15);
            color: #58a6ff;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .content-preview-container {
            background: rgba(13, 17, 23, 0.9);
            border: 1px solid rgba(48, 54, 61, 0.8);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .content-preview {
            color: #e6edf3;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.8rem;
            line-height: 1.4;
            margin: 0;
            padding: 16px;
            white-space: pre-wrap;
            word-wrap: break-word;
            max-height: 400px;
            overflow-y: auto;
            background: none;
            border: none;
        }
        
        .content-preview::-webkit-scrollbar {
            width: 8px;
        }
        
        .content-preview::-webkit-scrollbar-track {
            background: rgba(22, 27, 34, 0.5);
        }
        
        .content-preview::-webkit-scrollbar-thumb {
            background: rgba(125, 133, 144, 0.5);
            border-radius: 4px;
        }
        
        .content-preview::-webkit-scrollbar-thumb:hover {
            background: rgba(125, 133, 144, 0.7);
        }
        
        .raw-params-json {
            color: #e6edf3;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.85rem;
            line-height: 1.4;
            margin: 0;
            white-space: pre;
            overflow-x: auto;
            background: none;
            border: none;
            padding: 0;
        }
        
        .raw-params-json::-webkit-scrollbar {
            height: 6px;
        }
        
        .raw-params-json::-webkit-scrollbar-track {
            background: rgba(33, 38, 45, 0.5);
            border-radius: 3px;
        }
        
        .raw-params-json::-webkit-scrollbar-thumb {
            background: rgba(125, 133, 144, 0.5);
            border-radius: 3px;
        }
        
        .raw-params-json::-webkit-scrollbar-thumb:hover {
            background: rgba(125, 133, 144, 0.7);
        }
        
        .context-details, .operation-details {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .context-item, .operation-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid rgba(48, 54, 61, 0.5);
        }
        
        .context-item:last-child, .operation-item:last-child {
            border-bottom: none;
        }
        
        .context-label, .operation-label {
            font-weight: 600;
            color: var(--text-secondary);
            min-width: 120px;
        }
        
        .context-value, .operation-value {
            color: var(--text-primary);
            text-align: right;
            flex: 1;
        }
        
        .tool-id-badge {
            background: rgba(56, 139, 253, 0.15);
            color: #58a6ff;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            margin-left: 8px;
        }
        
        
        .insights-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
        }
        
        .insight-card {
            padding: 12px;
            background: rgba(22, 27, 34, 0.6);
            border-radius: 6px;
            border: 1px solid rgba(48, 54, 61, 0.8);
        }
        
        .insight-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        
        .insight-icon {
            font-size: 1.1rem;
        }
        
        .insight-title {
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 0.85rem;
        }
        
        .insight-content {
            color: var(--text-primary);
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .context-explanation {
            color: var(--text-primary);
            line-height: 1.5;
        }
        
        .context-list {
            margin: 16px 0;
            padding-left: 20px;
        }
        
        .context-list li {
            margin-bottom: 8px;
            color: var(--text-secondary);
        }
        
        .context-note {
            margin-top: 16px;
            padding: 12px;
            background: rgba(56, 139, 253, 0.1);
            border-radius: 6px;
            border-left: 3px solid #58a6ff;
            font-size: 0.9rem;
        }

        /* Responsive design for tool modal */
        @media (max-width: 768px) {
            .read-tool-modal {
                max-width: 95%;
                margin: 10px;
            }
            
            .insights-grid {
                grid-template-columns: 1fr;
            }
            
            .compact-context-grid {
                grid-template-columns: 1fr;
            }
            
            .compact-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 2px;
            }
            
            .compact-value {
                text-align: left;
            }
            
            .params-summary {
                justify-content: center;
            }
            
            .context-item, .operation-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
            }
            
            .context-label, .operation-label {
                min-width: auto;
            }
            
            .context-value, .operation-value {
                text-align: left;
            }

            .tool-overview-section {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .parameters-grid,
            .examples-container {
                grid-template-columns: 1fr;
            }

            .tips-grid {
                grid-template-columns: 1fr;
            }

            .usage-param {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
            }

            .param-label {
                min-width: auto;
            }
        }
        /* Glob Modal Styles */
        .agent-modal.glob-tool-modal .agent-modal-content {
            background: #0d1117;
            border: 1px solid #21262d;
        }
        
        .glob-pattern-section, .glob-components-section, .glob-insights-section {
            margin-bottom: 24px;
            padding: 16px;
            background: rgba(33, 38, 45, 0.5);
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }
        
        .glob-pattern-section h4, .glob-components-section h4, .glob-insights-section h4 {
            color: #d57455;
            font-size: 1.1rem;
            margin-bottom: 16px;
        }
        
        .pattern-display {
            font-family: 'Courier New', monospace;
            background: #1b1e23;
            padding: 4px 8px;
            border-radius: 3px;
            color: #f0c674;
            border: 1px solid #30363d;
        }
        
        .pattern-breakdown {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .pattern-component {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 12px;
            background: #161b22;
            border-left: 3px solid #30363d;
            border-radius: 0 4px 4px 0;
        }
        
        .pattern-component.recursive {
            border-left-color: #f85149;
        }
        
        .pattern-component.wildcard {
            border-left-color: #79c0ff;
        }
        
        .pattern-component.extension {
            border-left-color: #a5f3fc;
        }
        
        .pattern-component.partial-wildcard {
            border-left-color: #f0c674;
        }
        
        .pattern-component.char-wildcard {
            border-left-color: #b4befe;
        }
        
        .pattern-component.char-class {
            border-left-color: #a6e3a1;
        }
        
        .pattern-component.literal {
            border-left-color: #c9d1d9;
        }
        
        .pattern-part {
            font-family: 'Courier New', monospace;
            background: #21262d;
            padding: 4px 8px;
            border-radius: 3px;
            color: #58a6ff;
            min-width: 60px;
            text-align: center;
            font-weight: 500;
        }
        
        .pattern-desc {
            color: #8b949e;
            font-size: 0.875rem;
            flex: 1;
        }
        
        .pattern-empty {
            color: #8b949e;
            font-style: italic;
            text-align: center;
            padding: 20px;
        }
        
        .tool-insights {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 12px;
        }
        
        .insight-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: #161b22;
            border-radius: 4px;
            border: 1px solid #21262d;
        }
        
        .insight-label {
            color: #8b949e;
            font-weight: 500;
            font-size: 0.875rem;
        }
        
        .insight-value {
            color: #c9d1d9;
            font-weight: 400;
            text-align: right;
            max-width: 60%;
        }

        /* Grep Modal Styles */
        .agent-modal.grep-tool-modal .agent-modal-content {
            background: #0d1117;
            border: 1px solid #21262d;
        }
        
        .grep-config-section, .grep-options-section, .grep-pattern-section, .grep-insights-section {
            margin-bottom: 24px;
            padding: 16px;
            background: rgba(33, 38, 45, 0.5);
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }
        
        .grep-config-section h4, .grep-options-section h4, .grep-pattern-section h4, .grep-insights-section h4 {
            color: #d57455;
            font-size: 1.1rem;
            margin-bottom: 16px;
        }
        
        .search-pattern {
            font-family: 'Courier New', monospace;
            background: #1b1e23;
            padding: 4px 8px;
            border-radius: 3px;
            color: #a5f3fc;
            border: 1px solid #30363d;
        }
        
        .search-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .search-option {
            background: #161b22;
            border: 1px solid #21262d;
            border-radius: 4px;
            padding: 12px;
        }
        
        .search-option.enabled {
            border-left: 3px solid #238636;
        }
        
        .option-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }
        
        .option-name {
            font-weight: 500;
            color: #c9d1d9;
            font-size: 0.875rem;
        }
        
        .option-status {
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 3px;
            text-transform: uppercase;
            font-weight: 600;
        }
        
        .option-status.enabled {
            background: #238636;
            color: #ffffff;
        }
        
        .option-desc {
            color: #8b949e;
            font-size: 0.8rem;
            margin-top: 4px;
        }
        
        .no-options {
            color: #8b949e;
            font-style: italic;
            text-align: center;
            padding: 20px;
            background: #161b22;
            border-radius: 4px;
        }
        
        .pattern-analysis {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .pattern-analysis .pattern-component.regex {
            border-left-color: #f85149;
        }
        
        .pattern-analysis .pattern-component.anchor {
            border-left-color: #79c0ff;
        }
        
        .pattern-analysis .pattern-component.operator {
            border-left-color: #a5f3fc;
        }
        
        .pattern-analysis .pattern-component.charclass {
            border-left-color: #a6e3a1;
        }
        
        .pattern-analysis .pattern-component.group {
            border-left-color: #f0c674;
        }
        
        .pattern-simple {
            color: #8b949e;
            font-style: italic;
            text-align: center;
            padding: 20px;
            background: #161b22;
            border-radius: 4px;
        }
        
        .pattern-empty {
            color: #8b949e;
            font-style: italic;
            text-align: center;
            padding: 20px;
            background: #161b22;
            border-radius: 4px;
        }

        /* TodoWrite Modal Styles */
        .agent-modal.todo-tool-modal {
            max-width: 1200px;
            width: 98%;
        }
        
        .agent-modal.edit-tool-modal {
            max-width: 1200px;
            width: 98%;
        }
        
        /* Responsive adjustments for todo and edit tool modals */
        @media (max-width: 768px) {
            .agent-modal.todo-tool-modal,
            .agent-modal.edit-tool-modal {
                width: 95%;
                max-width: none;
                max-height: 90vh;
            }
            
            .agent-modal.todo-tool-modal .agent-modal-content,
            .agent-modal.edit-tool-modal .agent-modal-content {
                font-size: 0.9rem;
            }
        }
        
        @media (max-width: 480px) {
            .agent-modal.todo-tool-modal,
            .agent-modal.edit-tool-modal {
                width: 98%;
                margin: 10px;
            }
        }
        
        .agent-modal.todo-tool-modal .agent-modal-content {
            background: #0d1117;
            border: 1px solid #21262d;
        }
        
        .todo-summary-section, .todo-status-section, .todo-priority-section, .todo-items-section {
            margin-bottom: 24px;
            padding: 20px;
            background: rgba(33, 38, 45, 0.5);
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }
        
        /* JSON content styling in todo tool modal */
        .agent-modal.todo-tool-modal pre {
            background: #0a0e13;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 16px;
            overflow-x: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
            font-size: 0.9rem;
            line-height: 1.4;
            max-height: 400px;
            overflow-y: auto;
        }
        
        .agent-modal.todo-tool-modal code,
        .agent-modal.edit-tool-modal code {
            background: rgba(110, 118, 129, 0.1);
            padding: 2px 4px;
            border-radius: 3px;
            font-family: inherit;
        }
        
        /* Code content styling in edit tool modal */
        .agent-modal.edit-tool-modal pre {
            background: #0a0e13;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 16px;
            overflow-x: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
            font-size: 0.9rem;
            line-height: 1.4;
            max-height: 600px;
            overflow-y: auto;
        }
        
        .edit-code-block {
            background: #0a0e13;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 16px;
            margin: 12px 0;
            overflow-x: auto;
            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
            font-size: 0.9rem;
            line-height: 1.4;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        
        .todo-summary-section h4, .todo-status-section h4, .todo-priority-section h4, .todo-items-section h4 {
            color: #d57455;
            font-size: 1.1rem;
            margin-bottom: 16px;
        }
        
        .todo-summary {
            background: #161b22;
            border-radius: 6px;
            padding: 16px;
        }
        
        .summary-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 20px;
        }
        
        .stat-item {
            text-align: center;
            padding: 12px;
            background: #21262d;
            border-radius: 4px;
        }
        
        .stat-number {
            display: block;
            font-size: 2rem;
            font-weight: 700;
            color: #58a6ff;
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 0.875rem;
            color: #8b949e;
            text-transform: uppercase;
            font-weight: 500;
        }
        
        .status-breakdown {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .status-item {
            background: #161b22;
            border-radius: 4px;
            padding: 12px;
            border: 1px solid #21262d;
        }
        
        .status-item.pending {
            border-left: 3px solid #f0c674;
        }
        
        .status-item.in-progress {
            border-left: 3px solid #79c0ff;
        }
        
        .status-item.completed {
            border-left: 3px solid #238636;
        }
        
        .status-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .status-name {
            font-weight: 500;
            color: #c9d1d9;
        }
        
        .status-count {
            font-weight: 600;
            color: #58a6ff;
            background: #21262d;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 0.875rem;
        }
        
        .status-bar {
            width: 100%;
            height: 6px;
            background: #21262d;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .status-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        
        .status-item.pending .status-fill {
            background: #f0c674;
        }
        
        .status-item.in-progress .status-fill {
            background: #79c0ff;
        }
        
        .status-item.completed .status-fill {
            background: #238636;
        }
        
        .priority-distribution {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 12px;
        }
        
        .priority-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #161b22;
            border: 1px solid #21262d;
            border-radius: 4px;
            padding: 12px;
        }
        
        .priority-item.high {
            border-left: 3px solid #f85149;
        }
        
        .priority-item.medium {
            border-left: 3px solid #f0c674;
        }
        
        .priority-item.low {
            border-left: 3px solid #a6e3a1;
        }
        
        .priority-label {
            font-weight: 500;
            color: #c9d1d9;
            font-size: 0.875rem;
        }
        
        .priority-count {
            font-weight: 600;
            color: #58a6ff;
            background: #21262d;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 0.875rem;
        }
        
        .todo-items {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 400px;
            overflow-y: auto;
        }
        
        .todo-item {
            background: #161b22;
            border: 1px solid #21262d;
            border-radius: 4px;
            padding: 12px;
        }
        
        .todo-item.pending {
            border-left: 3px solid #f0c674;
        }
        
        .todo-item.in-progress {
            border-left: 3px solid #79c0ff;
        }
        
        .todo-item.completed {
            border-left: 3px solid #238636;
            opacity: 0.7;
        }
        
        .todo-header {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .todo-index {
            font-family: 'Courier New', monospace;
            font-size: 0.75rem;
            color: #8b949e;
            background: #21262d;
            padding: 2px 6px;
            border-radius: 3px;
            min-width: 24px;
            text-align: center;
        }
        
        .todo-status {
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 3px;
            text-transform: uppercase;
            font-weight: 600;
        }
        
        .todo-status.pending {
            background: #f0c674;
            color: #0d1117;
        }
        
        .todo-status.in_progress {
            background: #79c0ff;
            color: #0d1117;
        }
        
        .todo-status.completed {
            background: #238636;
            color: #ffffff;
        }
        
        .todo-priority {
            font-size: 0.75rem;
            padding: 2px 6px;
            border-radius: 3px;
            text-transform: uppercase;
            font-weight: 600;
        }
        
        .todo-priority.high {
            background: #f85149;
            color: #ffffff;
        }
        
        .todo-priority.medium {
            background: #f0c674;
            color: #0d1117;
        }
        
        .todo-priority.low {
            background: #a6e3a1;
            color: #0d1117;
        }
        
        .todo-content {
            color: #c9d1d9;
            line-height: 1.5;
            margin-bottom: 8px;
            font-size: 0.9rem;
        }
        
        .todo-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.75rem;
            color: #8b949e;
        }
        
        .todo-id {
            font-family: 'Courier New', monospace;
        }
        
        .todo-length {
            font-style: italic;
        }
        
        .no-todos {
            color: #8b949e;
            font-style: italic;
            text-align: center;
            padding: 20px;
            background: #161b22;
            border-radius: 4px;
        }

        /* Agent Analytics Styles */
        .agent-analytics {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        .analytics-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 30px;
            gap: 20px;
        }

        .header-content {
            flex: 1;
        }

        .analytics-title {
            color: var(--text-accent);
            font-size: 1.5rem;
            font-weight: normal;
            margin: 0 0 8px 0;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .title-icon {
            font-size: 1.4em;
        }

        .analytics-subtitle {
            color: var(--text-secondary);
            margin: 0;
            font-size: 0.9rem;
        }

        .date-filters {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 12px 16px;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .filter-group label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .date-input {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 4px;
            padding: 6px 8px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.85rem;
        }

        .date-input:focus {
            outline: none;
            border-color: var(--text-accent);
        }

        .refresh-btn {
            background: var(--text-accent);
            border: none;
            border-radius: 4px;
            padding: 8px 12px;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .refresh-btn:hover {
            background: var(--text-warning);
            transform: translateY(-1px);
        }

        .refresh-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .btn-icon {
            font-size: 0.9em;
        }

        /* Metrics Grid */
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 30px;
        }

        .metric-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: all 0.2s ease;
        }

        .metric-card:hover {
            border-color: var(--text-accent);
            box-shadow: 0 4px 12px var(--shadow-primary);
        }

        .metric-card.primary {
            border-color: var(--text-accent);
            box-shadow: 0 0 0 1px rgba(213, 116, 85, 0.1);
        }

        .metric-card.secondary {
            border-color: var(--text-info);
            box-shadow: 0 0 0 1px rgba(165, 214, 255, 0.1);
        }

        .metric-card.success {
            border-color: var(--text-success);
            box-shadow: 0 0 0 1px rgba(63, 185, 80, 0.1);
        }

        .metric-card.info {
            border-color: var(--text-warning);
            box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.1);
        }

        .metric-icon {
            font-size: 2em;
            opacity: 0.8;
        }

        .metric-content {
            flex: 1;
        }

        .metric-value {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--text-primary);
            margin: 0 0 4px 0;
        }

        .metric-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        /* Charts Container - Sectioned Layout */
        .charts-container {
            display: flex;
            flex-direction: column;
            gap: 40px;
            margin-bottom: 30px;
        }
        
        .chart-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .section-header {
            border-bottom: 2px solid var(--border-primary);
            padding-bottom: 12px;
        }
        
        .section-title {
            color: var(--text-accent);
            font-size: 1.1rem;
            font-weight: 700;
            margin: 0 0 6px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .section-description {
            color: var(--text-secondary);
            font-size: 0.85rem;
            margin: 0;
            font-weight: 400;
        }
        
        .section-charts {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
        }

        .chart-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 20px;
            transition: all 0.2s ease;
        }

        .chart-card:hover {
            border-color: var(--text-accent);
            box-shadow: 0 4px 12px var(--shadow-primary);
        }

        .chart-header {
            margin-bottom: 20px;
        }

        .chart-header h3 {
            color: var(--text-primary);
            font-size: 1.1rem;
            margin: 0 0 4px 0;
            font-weight: 600;
        }

        .chart-header p {
            color: var(--text-secondary);
            font-size: 0.85rem;
            margin: 0;
        }

        .chart-content {
            position: relative;
            height: 300px;
        }

        .chart-content canvas {
            width: 100% !important;
            height: 100% !important;
        }

        /* Efficiency Metrics */
        .efficiency-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
        }

        .efficiency-card {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.2s ease;
        }

        .efficiency-card:hover {
            border-color: var(--text-accent);
        }

        .efficiency-icon {
            font-size: 1.5em;
            opacity: 0.8;
        }

        .efficiency-content {
            flex: 1;
        }

        .efficiency-value {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--text-primary);
            margin: 0 0 2px 0;
        }

        .efficiency-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .efficiency-loading {
            text-align: center;
            padding: 40px;
            color: var(--text-secondary);
        }

        /* Agent Details Section */
        .agent-details-section {
            margin-bottom: 30px;
        }

        .agent-details-section h3 {
            color: var(--text-primary);
            font-size: 1.2rem;
            margin: 0 0 16px 0;
            font-weight: 600;
        }

        .agent-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 16px;
        }

        .agent-stat-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 20px;
            transition: all 0.2s ease;
        }

        .agent-stat-card:hover {
            border-color: var(--text-accent);
            box-shadow: 0 4px 12px var(--shadow-primary);
        }

        .agent-stat-header {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
        }

        .agent-stat-icon {
            font-size: 1.8em;
            flex-shrink: 0;
        }

        .agent-stat-info {
            flex: 1;
        }

        .agent-stat-info h4 {
            color: var(--text-primary);
            font-size: 1rem;
            margin: 0 0 4px 0;
            font-weight: 600;
        }

        .agent-stat-info p {
            color: var(--text-secondary);
            font-size: 0.85rem;
            margin: 0;
        }

        .agent-stat-badge {
            background: var(--bg-tertiary);
            border-radius: 12px;
            padding: 4px 8px;
            font-size: 0.75rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .agent-stat-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 8px;
        }

        .stat-metric {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            border-bottom: 1px solid var(--border-primary);
        }

        .stat-metric:last-child {
            border-bottom: none;
        }

        .metric-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .metric-value {
            font-size: 0.8rem;
            color: var(--text-primary);
            font-weight: 600;
        }

        .stats-loading {
            text-align: center;
            padding: 40px;
            color: var(--text-secondary);
        }

        /* Workflow Patterns */
        .workflow-patterns-section {
            margin-bottom: 30px;
        }

        .workflow-patterns-section h3 {
            color: var(--text-primary);
            font-size: 1.2rem;
            margin: 0 0 8px 0;
            font-weight: 600;
        }

        .workflow-patterns-section p {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin: 0 0 16px 0;
        }

        .workflow-patterns {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .workflow-pattern {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s ease;
        }

        .workflow-pattern:hover {
            border-color: var(--text-accent);
        }

        .pattern-flow {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            color: var(--text-primary);
            font-size: 0.9rem;
        }

        .pattern-count {
            background: var(--text-accent);
            color: white;
            border-radius: 12px;
            padding: 4px 8px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* No Data States */
        .no-agent-data,
        .agent-analytics-error {
            text-align: center;
            padding: 60px 20px;
        }

        .no-data-content,
        .error-content {
            max-width: 500px;
            margin: 0 auto;
        }

        .no-data-icon,
        .error-icon {
            font-size: 4em;
            margin-bottom: 20px;
            opacity: 0.6;
        }

        .no-agent-data h3,
        .agent-analytics-error h3 {
            color: var(--text-primary);
            font-size: 1.3rem;
            margin: 0 0 12px 0;
            font-weight: 600;
        }

        .no-agent-data p,
        .agent-analytics-error p {
            color: var(--text-secondary);
            margin: 0 0 20px 0;
            line-height: 1.5;
        }

        .agent-types {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            text-align: left;
        }

        .agent-types h4 {
            color: var(--text-primary);
            font-size: 1rem;
            margin: 0 0 12px 0;
            font-weight: 600;
        }

        .agent-types ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .agent-types li {
            padding: 8px 0;
            border-bottom: 1px solid var(--border-primary);
        }

        .agent-types li:last-child {
            border-bottom: none;
        }

        .agent-types strong {
            color: var(--text-accent);
            font-weight: 600;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .analytics-header {
                flex-direction: column;
                gap: 16px;
            }

            .date-filters {
                flex-wrap: wrap;
                gap: 8px;
            }

            .metrics-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 12px;
            }

            .charts-container {
                gap: 30px;
            }
            
            .section-charts {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 16px;
            }

            .agent-stats-grid {
                grid-template-columns: 1fr;
            }

            .efficiency-grid {
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            }
        }

        /* Activity Heatmap Styles */
        .activity-heatmap-section {
            margin: 24px 0;
        }

        .activity-heatmap-section .section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-primary);
        }

        .activity-heatmap-section .section-title h2 {
            color: var(--text-primary);
            font-size: 1.1rem;
            margin: 0;
            font-weight: 600;
            letter-spacing: -0.01em;
        }

        .heatmap-settings {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-secondary);
            font-size: 0.8rem;
            cursor: pointer;
            padding: 6px 10px;
            border-radius: 6px;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }

        .heatmap-settings:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-color: var(--border-primary);
        }

        .heatmap-settings-icon {
            font-size: 0.7rem;
            opacity: 0.8;
        }

        .heatmap-settings-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--bg-primary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            box-shadow: 0 8px 24px rgba(1, 4, 9, 0.7);
            padding: 12px;
            z-index: 1000;
            min-width: 200px;
            display: none;
        }

        .heatmap-settings-dropdown.show {
            display: block;
        }

        .heatmap-setting-group {
            margin-bottom: 12px;
        }

        .heatmap-setting-group:last-child {
            margin-bottom: 0;
        }

        .heatmap-setting-label {
            color: var(--text-primary);
            font-size: 0.75rem;
            font-weight: 500;
            margin-bottom: 6px;
            display: block;
        }

        .heatmap-metric-selector {
            display: flex;
            gap: 8px;
        }

        .heatmap-metric-option {
            flex: 1;
            padding: 6px 10px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 4px;
            font-size: 0.75rem;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s ease;
            color: var(--text-secondary);
        }

        .heatmap-metric-option:hover {
            border-color: var(--text-accent);
            color: var(--text-primary);
        }

        .heatmap-metric-option.active {
            background: var(--text-accent);
            border-color: var(--text-accent);
            color: #000;
            font-weight: 500;
        }

        .heatmap-metric-option.messages.active {
            background: rgb(249, 115, 22);
            border-color: rgb(249, 115, 22);
        }

        .heatmap-metric-option.tools.active {
            background: rgb(147, 51, 234);
            border-color: rgb(147, 51, 234);
        }

        .activity-heatmap-container {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 24px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .heatmap-header {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 20px;
        }

        .heatmap-legend {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .heatmap-legend-text {
            margin-right: 2px;
            font-weight: 500;
        }

        .heatmap-legend-scale {
            display: flex;
            gap: 3px;
        }

        .heatmap-legend-square {
            width: 11px;
            height: 11px;
            border-radius: 3px;
            border: 1px solid var(--border-secondary);
            transition: all 0.2s ease;
        }

        .heatmap-legend-square:hover {
            border-color: var(--text-accent);
            transform: scale(1.1);
        }

        .heatmap-legend-square.level-0 {
            background: #21262d;
        }

        .heatmap-legend-square.level-1 {
            background: rgba(249, 115, 22, 0.25);
        }

        .heatmap-legend-square.level-2 {
            background: rgba(249, 115, 22, 0.45);
        }

        .heatmap-legend-square.level-3 {
            background: rgba(249, 115, 22, 0.65);
        }

        .heatmap-legend-square.level-4 {
            background: rgb(249, 115, 22);
        }

        .heatmap-legend-more {
            margin-left: 2px;
            font-weight: 500;
        }

        .heatmap-grid {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 12px;
            align-items: start;
            width: 100%;
        }

        .heatmap-months {
            position: relative;
            height: 16px;
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
            grid-column: 2;
            font-weight: 500;
        }

        .heatmap-month {
            position: absolute;
            top: 0;
            text-align: left;
            white-space: nowrap;
            overflow: visible;
        }

        .heatmap-weekdays {
            display: grid;
            grid-template-rows: repeat(7, 1fr);
            gap: 3px;
            font-size: 0.75rem;
            color: var(--text-secondary);
            align-self: start;
            padding-top: 22px;
            font-weight: 500;
        }

        .heatmap-weekday {
            height: 11px;
            display: flex;
            align-items: center;
            justify-content: end;
            padding-right: 6px;
        }

        .heatmap-weeks {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(11px, 1fr));
            gap: 3px;
            align-self: start;
            width: 100%;
        }

        .heatmap-week {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .heatmap-day {
            width: 11px;
            height: 11px;
            border-radius: 3px;
            border: 1px solid #1c2128;
            cursor: pointer;
            transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .heatmap-day:hover {
            border-color: var(--text-accent);
            transform: scale(1.15);
            z-index: 10;
            box-shadow: 0 0 0 1px var(--text-accent);
        }

        /* Activity level colors - Clean orange gradient */
        .heatmap-day.level-0 {
            background: #21262d;
        }

        .heatmap-day.level-1 {
            background: rgba(249, 115, 22, 0.4);
            border-color: rgba(249, 115, 22, 0.45);
        }

        .heatmap-day.level-2 {
            background: rgba(249, 115, 22, 0.55);
            border-color: rgba(249, 115, 22, 0.6);
        }

        .heatmap-day.level-3 {
            background: rgba(249, 115, 22, 0.75);
            border-color: rgba(249, 115, 22, 0.8);
        }

        .heatmap-day.level-4 {
            background: rgb(249, 115, 22);
            border-color: rgb(249, 115, 22);
        }

        /* Purple theme for tools mode */
        .heatmap-day.level-1.tools-mode {
            background: rgba(147, 51, 234, 0.4);
            border-color: rgba(147, 51, 234, 0.45);
        }

        .heatmap-day.level-2.tools-mode {
            background: rgba(147, 51, 234, 0.55);
            border-color: rgba(147, 51, 234, 0.6);
        }

        .heatmap-day.level-3.tools-mode {
            background: rgba(147, 51, 234, 0.75);
            border-color: rgba(147, 51, 234, 0.8);
        }

        .heatmap-day.level-4.tools-mode {
            background: rgb(147, 51, 234);
            border-color: rgb(147, 51, 234);
        }

        /* Purple theme for legend squares in tools mode */
        .activity-heatmap-container.tools-mode .heatmap-legend-square.level-1 {
            background: rgba(147, 51, 234, 0.4);
        }

        .activity-heatmap-container.tools-mode .heatmap-legend-square.level-2 {
            background: rgba(147, 51, 234, 0.55);
        }

        .activity-heatmap-container.tools-mode .heatmap-legend-square.level-3 {
            background: rgba(147, 51, 234, 0.75);
        }

        .activity-heatmap-container.tools-mode .heatmap-legend-square.level-4 {
            background: rgb(147, 51, 234);
        }

        .heatmap-tooltip {
            position: absolute;
            background: #000;
            color: white;
            padding: 10px 14px;
            border-radius: 6px;
            font-size: 0.8rem;
            white-space: nowrap;
            z-index: 1000;
            pointer-events: none;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            opacity: 0;
            transition: opacity 0.2s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .heatmap-tooltip.show {
            opacity: 1;
        }

        .heatmap-tooltip-date {
            font-weight: 600;
            margin-bottom: 4px;
            color: white;
        }

        .heatmap-tooltip-activity {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.75rem;
        }

        .heatmap-empty-state {
            text-align: center;
            padding: 60px 40px;
            color: var(--text-secondary);
            border: 2px dashed var(--border-primary);
            border-radius: 8px;
            background: var(--bg-tertiary);
        }

        .heatmap-empty-icon {
            font-size: 2.5rem;
            margin-bottom: 12px;
            opacity: 0.6;
        }

        .heatmap-empty-text {
            font-size: 1rem;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-primary);
        }

        .heatmap-empty-subtext {
            font-size: 0.85rem;
            opacity: 0.8;
            line-height: 1.4;
        }

        /* Loading state for heatmap */
        .heatmap-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 60px;
            gap: 12px;
            color: var(--text-secondary);
        }

        .heatmap-loading-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-primary);
            border-top: 2px solid var(--text-accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .activity-heatmap-container {
                padding: 20px 16px;
                overflow-x: auto;
            }
            
            .heatmap-grid {
                min-width: 700px;
            }
            
            .heatmap-settings {
                font-size: 0.75rem;
                padding: 4px 8px;
            }

            .activity-heatmap-section .section-title {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .heatmap-header {
                justify-content: center;
                margin-bottom: 16px;
            }

            .heatmap-legend {
                font-size: 0.75rem;
                gap: 8px;
            }

            .heatmap-loading {
                padding: 40px;
            }

            .heatmap-empty-state {
                padding: 40px 20px;
            }
        }

        @media (max-width: 480px) {
            .activity-heatmap-section {
                margin: 16px -10px;
            }

            .activity-heatmap-container {
                border-radius: 0;
                border-left: none;
                border-right: none;
            }

            .heatmap-weekdays {
                font-size: 0.7rem;
            }

            .heatmap-months {
                font-size: 0.7rem;
            }
        }

    </style>
</head>
<body>
    <!-- Mobile Menu Button -->
    <button class="mobile-menu-btn" id="mobileMenuBtn">
        <span class="menu-icon" id="menuIcon">☰</span>
    </button>
    
    <!-- Mobile Overlay -->
    <div class="mobile-overlay" id="mobileOverlay"></div>
    
    <div id="app">
        <!-- App will be initialized here -->
    </div>
    
    <!-- Theme Toggle (Global) - Hidden, kept for sync -->
    <div class="global-theme-toggle" style="display: none;">
        <div class="theme-switch-container" title="Toggle light/dark theme">
            <div class="theme-switch" id="themeSwitch">
                <div class="theme-switch-track">
                    <div class="theme-switch-thumb" id="themeSwitchThumb">
                        <span class="theme-switch-icon">🌙</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // Mobile Menu Functionality
        function initMobileMenu() {
            console.log('🔧 Initializing mobile menu...');
            
            const mobileMenuBtn = document.getElementById('mobileMenuBtn');
            const mobileOverlay = document.getElementById('mobileOverlay');
            const menuIcon = document.getElementById('menuIcon');
            
            console.log('Mobile menu elements:', {
                btn: !!mobileMenuBtn,
                overlay: !!mobileOverlay
            });
            
            let isMobileMenuOpen = false;
            
            function toggleMobileMenu() {
                console.log('📱 Toggling mobile menu:', !isMobileMenuOpen);
                
                // Wait for sidebar to be available
                const sidebar = document.querySelector('.sidebar');
                if (!sidebar) {
                    console.warn('Sidebar not found yet, retrying...');
                    setTimeout(toggleMobileMenu, 100);
                    return;
                }
                
                isMobileMenuOpen = !isMobileMenuOpen;
                
                if (isMobileMenuOpen) {
                    sidebar.classList.add('mobile-open');
                    if (mobileOverlay) mobileOverlay.classList.add('active');
                    if (mobileMenuBtn) mobileMenuBtn.classList.add('menu-open');
                    if (menuIcon) menuIcon.textContent = '×';
                    console.log('✅ Mobile menu opened');
                } else {
                    sidebar.classList.remove('mobile-open');
                    if (mobileOverlay) mobileOverlay.classList.remove('active');
                    if (mobileMenuBtn) mobileMenuBtn.classList.remove('menu-open');
                    if (menuIcon) menuIcon.textContent = '☰';
                    console.log('❌ Mobile menu closed');
                }
            }
            
            // Bind mobile menu button
            if (mobileMenuBtn) {
                console.log('🔗 Binding mobile menu button');
                mobileMenuBtn.addEventListener('click', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    toggleMobileMenu();
                });
            } else {
                console.warn('❌ Mobile menu button not found');
            }
            
            // Bind overlay click
            if (mobileOverlay) {
                mobileOverlay.addEventListener('click', () => {
                    if (isMobileMenuOpen) {
                        toggleMobileMenu();
                    }
                });
            }
            
            // Close mobile menu when clicking on sidebar links
            document.addEventListener('click', (e) => {
                if (e.target.closest('.nav-link') && window.innerWidth <= 768 && isMobileMenuOpen) {
                    setTimeout(() => toggleMobileMenu(), 100);
                }
            });
            
            // Handle window resize
            window.addEventListener('resize', () => {
                if (window.innerWidth > 768 && isMobileMenuOpen) {
                    const sidebar = document.querySelector('.sidebar');
                    if (sidebar) {
                        sidebar.classList.remove('mobile-open');
                        if (mobileOverlay) mobileOverlay.classList.remove('active');
                        if (mobileMenuBtn) mobileMenuBtn.classList.remove('menu-open');
                        if (menuIcon) menuIcon.textContent = '☰';
                        isMobileMenuOpen = false;
                    }
                }
            });
            
            console.log('✅ Mobile menu initialized');
        }
        
        // Initialize the App.js based application (with Sidebar layout)
        document.addEventListener('DOMContentLoaded', async function() {
            const appContainer = document.getElementById('app');
            
            try {
                // Initialize services in correct order
                console.log('🚀 Initializing Claude Analytics App with Sidebar...');
                
                // 1. Initialize WebSocket service first
                const websocketService = new WebSocketService();
                
                // 2. Initialize DataService with WebSocket service
                const dataService = new DataService();
                dataService.setWebSocketService(websocketService);
                dataService.baseURL = window.location.origin; // Use current host
                
                // 3. Initialize StateService
                const stateService = new StateService();
                
                // 4. Create services object
                const services = {
                    data: dataService,
                    state: stateService,
                    websocket: websocketService
                };
                
                // 5. Initialize WebSocket connection (with fallback for server not running)
                try {
                    await websocketService.connect();
                    console.log('✅ WebSocket connected');
                } catch (error) {
                    console.warn('⚠️ WebSocket connection failed - using fallback mode:', error.message);
                }
                
                // 6. Initialize main App component (which uses Sidebar + navigation)
                console.log('🔧 Initializing main App component with Sidebar...');
                const app = new App(appContainer, services);
                
                // 7. Initialize mobile menu functionality after a delay
                setTimeout(() => {
                    initMobileMenu();
                }, 500);
                
                // 8. Store app instance globally for debugging
                window.claudeAnalyticsApp = app;
                
                console.log('🎉 Claude Analytics App with Sidebar initialized successfully!');
                
            } catch (error) {
                console.error('❌ Failed to initialize Claude Analytics App:', error);
                
                // Show error message to user
                appContainer.innerHTML = `
                    <div style="display: flex; align-items: center; justify-content: center; min-height: 100vh; text-align: center; color: var(--text-error);">
                        <div>
                            <h2>❌ Application Error</h2>
                            <p>Failed to initialize the analytics dashboard.</p>
                            <p style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 16px;">
                                Error: ${error.message}
                            </p>
                            <button onclick="location.reload()" style="
                                margin-top: 16px; 
                                padding: 8px 16px; 
                                background: var(--text-accent); 
                                color: white; 
                                border: none; 
                                border-radius: 4px; 
                                cursor: pointer;
                            ">
                                Retry
                            </button>
                        </div>
                    </div>
                `;
            }
        });
        
        // Theme switching functionality
        function initializeTheme() {
            const themeSwitch = document.getElementById('themeSwitch');
            const themeSwitchThumb = document.getElementById('themeSwitchThumb');
            const body = document.body;
            
            // Load saved theme
            const savedTheme = localStorage.getItem('claude-analytics-theme') || 'dark';
            if (savedTheme === 'light') {
                body.setAttribute('data-theme', 'light');
                themeSwitchThumb.classList.add('light');
                themeSwitchThumb.querySelector('.theme-switch-icon').textContent = '☀️';
            }
            
            // Theme switch handler
            themeSwitch.addEventListener('click', function() {
                const isLight = body.getAttribute('data-theme') === 'light';
                const newTheme = isLight ? 'dark' : 'light';
                
                body.setAttribute('data-theme', newTheme);
                themeSwitchThumb.classList.toggle('light', newTheme === 'light');
                themeSwitchThumb.querySelector('.theme-switch-icon').textContent = newTheme === 'light' ? '☀️' : '🌙';
                
                localStorage.setItem('claude-analytics-theme', newTheme);
            });
        }
        
        // Initialize theme immediately
        initializeTheme();
        
        // Results Modal Management
        window.showResultsModal = function(contentId) {
            console.log('🔍 showResultsModal called with contentId:', contentId);
            console.log('🔍 Available stored content keys:', Object.keys(window.storedContent || {}));
            console.log('🔍 Available stored tool data keys:', Object.keys(window.storedToolData || {}));
            
            const content = window.storedContent && window.storedContent[contentId];
            if (!content) {
                console.error('❌ Content not found for ID:', contentId);
                alert('Content not found for ID: ' + contentId);
                return;
            }
            
            // Check if this is a Read tool by examining stored tool data
            const toolData = window.storedToolData && window.storedToolData[contentId];
            console.log('🔍 Tool data for', contentId, ':', toolData);
            console.log('🔍 window.claudeAnalyticsApp:', window.claudeAnalyticsApp);
            console.log('🔍 window.claudeAnalyticsApp.agentsPage:', window.claudeAnalyticsApp && window.claudeAnalyticsApp.agentsPage);
            
            // Check if this is a supported tool with custom modal
            const supportedTools = ['Read', 'Edit', 'Write', 'Bash', 'Glob', 'Grep', 'TodoWrite'];
            if (toolData && supportedTools.includes(toolData.name) && window.claudeAnalyticsApp && window.claudeAnalyticsApp.agentsPage) {
                console.log(`✅ Opening custom ${toolData.name} tool modal`);
                // Open tool-specific modal
                window.claudeAnalyticsApp.agentsPage.openToolModal(toolData);
                return;
            } else {
                console.log('❌ Custom tool modal conditions not met:');
                console.log('   - toolData exists:', !!toolData);
                console.log('   - toolData.name:', toolData?.name);
                console.log('   - is supported tool:', toolData ? supportedTools.includes(toolData.name) : false);
                console.log('   - window.claudeAnalyticsApp exists:', !!window.claudeAnalyticsApp);
                console.log('   - agentsPage exists:', !!(window.claudeAnalyticsApp && window.claudeAnalyticsApp.agentsPage));
            }
            
            // Default modal for other tools
            const modal = document.getElementById('results-modal');
            const modalContent = document.getElementById('modal-results-content');
            const modalTitle = document.getElementById('modal-results-title');
            
            // Set title with content info
            const lines = content.split('\n');
            modalTitle.textContent = `Details (${lines.length} lines, ${content.length} characters)`;
            
            // Set content with proper formatting
            modalContent.textContent = content;
            
            // Show modal
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        };
        
        window.closeResultsModal = function() {
            const modal = document.getElementById('results-modal');
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        };
        
        // Copy content to clipboard
        window.copyResultsContent = function() {
            const content = document.getElementById('modal-results-content').textContent;
            navigator.clipboard.writeText(content).then(() => {
                const button = document.querySelector('.copy-btn');
                const originalText = button.textContent;
                button.textContent = 'Copied!';
                setTimeout(() => {
                    button.textContent = originalText;
                }, 2000);
            });
        };
        
        // Close modal on Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                const modal = document.getElementById('results-modal');
                if (modal && modal.style.display === 'flex') {
                    closeResultsModal();
                }
            }
        });
        
        // Close modal when clicking outside content
        document.addEventListener('click', function(event) {
            const modal = document.getElementById('results-modal');
            if (event.target === modal) {
                closeResultsModal();
            }
        });
        
        // Handle Show results button clicks
        document.addEventListener('click', function(event) {
            if (event.target.classList.contains('show-results-btn')) {
                const contentId = event.target.getAttribute('data-content-id');
                if (contentId) {
                    window.showResultsModal(contentId);
                }
            }
        });
    </script>
    
    <!-- Results Modal -->
    <div id="results-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modal-results-title">Tool Details</h3>
                <div class="modal-actions">
                    <button class="copy-btn" onclick="copyResultsContent()">Copy</button>
                    <button class="close-btn" onclick="closeResultsModal()">&times;</button>
                </div>
            </div>
            <div class="modal-body">
                <pre id="modal-results-content" class="modal-results-content"></pre>
            </div>
        </div>
    </div>
</body>
</html>
